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为 何 要 学 设计 ? = 


随 着 社会 的 发 展 ， 人 们 对 美好 事物 的 追求 与 渴望 已 达到 了 一 个 新 
的 高 度 。 这 一 点 充分 体现 在 了 审美 意识 上 。 毫 不 夸张 地 讲 ， 我 们 身边 
的 美 无 处 不 有 ， 大 到 园林 建筑 ， 小 到 平面 海报 ， 抑 或 是 小 车 里 的 门店 
也 都 要 装饰 一 番 以 凸显 出 自己 的 特色 ， 这 一 切 都 是 “设计 ”的 结果 。 
可 以 说 生活 中 的 很 多 元 素 都 被 有 意 或 无 意识 地 设计 过 。 俗 话说 : 学 设 
计 饿 不 死 , 学 设计 高 工资 ! 那些 有 经 验 的 设计 师 们 , 月 薪 超 过 多 数 行业 ， 
正 是 因为 这 一 点 很 多 人 都 投身 于 设计 行业 。 


问 : 学 设计 可 以 就 职 哪 类 工作 ? 求职 难 吗 ? | 
答 : 广为人知 的 设计 行业 包括 : 室内 设计 、 广告 设计 、UI 设 计 、 珠宝 设计 、 
服装 设计 、 环 艺 设 计 、 影 视 动 画 设计 …… 所 以 你 还 在 问 求职 难 吗 ! 


| 商 : 如 何 选择 学 习 软件 ? ] 
答 : 根据 设计 类 型 和 就 业 方向 ， 学 习 相 关 软件 。 比 如 ， 平 面 设 计 类 软 
件 大 同 小 异 , 重 在 设计 体验 。 室 内 外 设计 软件 各 有 侧重 , 贵 在 实际 应 用 。 
各 类 软件 之 间 也 要 配合 使 用 ， 好 比 设计 师 要 用 Photoshop 对 建筑 效果 
图 做 后 期 处 理 ， 为 了 让 设计 作品 呈现 更 好 的 效果 ， 有 时 会 把 视频 编辑 
软件 与 平面 软件 相互 配合 。 


疝 : 没有 美术 基础 的 人 也 可 以 学 设计 吗 ? ] 

答 : 可 以 。 设 计 类 的 专业 有 很 多 ， 并 不 是 所 有 的 设计 专业 都 需要 有 美 
术 的 功底 。 例 如 工业 设计 、 展 示 设 计 等 。 俗 话说 “艺术 归结 于 生活 ”， 
学 设计 不 但 可 以 提高 自身 审美 能 力 ， 还 能 有 效 的 指引 人 们 制作 出 更 精 
良 的 作品 ， 提 升 自己 的 生活 品质 。 


IM 
: 自学 设计 可 以 先 从 软件 入 手 : 位 图 、 矢 量 图 和 排版 。 学 会 了 软件 可 以 胜任 90% 的 设计 工作 , 只 是 缺乏 “经 
验 ”。 设 计 是 软件 技术 + 审美 + 创意 ， 其 中 软件 学 习 比 较 容 易 上 手 ， 而 审美 的 提升 则 需要 多 欣 党 优秀 作品 
只 要 不 断 学 习 ， 突 破 自我 ， 优 秀 的 设计 技术 就 能 轻松 掌握 ! 


系列 图 书 课程 安排 = 


本 系列 图 书 既 注 重 单个 软件 的 实 操 应 用 ， 又 看 重 多 个 软件 的 协同 办 公 ， 以 “理论 知识 + 实际 应 用 + 案例 
展示 ”为 创作 思路 ， 向 读者 全 面前 述 了 各 软件 在 设计 领域 中 的 强大 功能 。 在 讲解 过 程 中 ， 结 合 各 领域 的 实际 
应 用 ， 对 相关 的 行业 知识 进行 了 深度 剖析 ， 以 辅助 读者 完成 各 种 类 型 的 设计 工作 。 正 所 谓 要 “ 授 人 以 渔 ”， 
读者 不 仅 可 以 掌握 这 些 设计 软件 的 使 用 方法 ， 还 能 利用 它 独立 完成 作品 的 创作 。 本 系列 图 书包 含 以 下 图 书 
作品 : 

《3ds max 建 模 技 法 经 典 课堂 》 

《3ds max+Vray 效果 图 0 》 
《SketchUp 草图 大 师 建 筑 。 景观。 园林 设计 经 典 课堂 》 
《AutoCAD + 3ds max+Vray 室内 效果 图 表现 技法 经 典 课堂 》 
《AutoCAD + SketchUp + Vray 建筑 室内 外 效果 表现 技法 经 典 课堂 》 
《Adobe Photoshop CC 图 像 处 理 经 典 课堂 》 

《Adobe lllustrator CC 平面 设计 经 典 课堂 》 

《Adobe InDesign CC 版 式 设计 经 典 课堂 》 

《Adobe Photoshop + lllustrator 平面 设计 经 典 课堂 》 
《Adobe Photoshop + CorelDRAW 平面 设计 经 典 课堂 》 
《Adobe Premiere Pro CC 视频 编辑 经 典 课堂 》 

《Adobe After Effects CC 影视 特效 制作 经 典 课堂 》 
《HTML5+CSS3 网 页 设计 与 布局 经 典 课堂 》 
《HTML5+CSS3+JavaScript 网 页 设计 经 典 课堂 》 


配套 资源 获取 方式 = 


目前 市 场 上 很 多 计算 机 图 书 中 配 带 的 DVD 光盘 ， 总 是 容易 破损 或 无 法 正常 读 取 。 鉴 于 此 ， 本 系列 图 书 
的 资源 可 以 发 送 邮 件 至 619831182@qq.com ， 制 作者 会 在 第 一 时 间 将 其 发 至 您 的 邮箱 。 


适用 读者 群体 = 


呵 前 端 开发 制作 人 员 。 作者 团队 

呵 网 页 美工 或 者 想 转 行 前 端的 设计 人 员 。 本 书 由 杨 艳 、 张 坦 编写 。 其 中 伏 凤 恋 、 王 春芳 、 杨 继 光 、 

回 Ul 及 网 页 设计 培训 班 学 员 。 李 瑞 峰 、 王 银 寿 、 李 保 荣 等 ， 也 为 本 书 出 版 付出 辛勤 的 工 

加 大 中 专 院 校 及 高 等 院 校 相关 专业 师 生 作 在 此 对 他 们 的 辛苦 付出 表示 真诚 的 感谢 ， 最 后 感谢 郑州 
. 轻工业 大 学 教务 处 的 大 力 支持 。 

加 网 页 设计 爱好 者 。 


0 要 和 和 


致谢 


为 了 令 本 系列 图 书 尽 可 能 满足 读者 的 需要 ， 许 多 人 付出 了 辛勤 的 


劳动 。 在 此 ， 向 参与 本 书 出 版 工作 的 “ACAA 教育 集团 ”和 “Autodesk 
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国教 育 管理 中 心 ” 的 领导 及 老师 、 米 粒 儿 设计 团队 成 员 等 ， 致 以 诚 


挚 谢意。 同时 感谢 清华 大 学 出 版 社 的 所 有 编审 人 员 为 本 系列 图 书 的 出 
版 所 付出 的 辛勤 劳动 。 本 系列 图 书 在 编写 过 程 中 力求 严谨 细致 ， 但 由 
于 时 间 有 限 ， 书 中 仍 难 免 出 现 疏 漏 和 不 妥 之 处 ， 希 望 各 位 读者 朋友 们 
多 多 包涵 ， 并 批评 指正 ， 万 分 感谢 
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CHAPTER 01 
HTMLS 


本 章 概述 

HTML5 中 增加 和 废除 了 很 多 标签 ， 比 如 新 增 的 结构 标签 : section 
元 素 /video 元 素 等 。 本 章 将 对 这 些 知 识 展开 详细 介绍 ， 以 为 之 
后 的 学 习 葛 定 良好 的 基础 。 


图 学 习 目 标 

了 解 HTML5 新 特性 和 优势 。 

掌握 HTML5 中 新 增 主 体 结构 元 素 的 定义 。 

掌握 HTML5 中 新 增 非 主 体 结构 元 素 的 定义 。 

掌握 HTML5 中 新 增 主 体 和 非 主体 结构 元 素 的 使 用 方法 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时 。 


知识 导 图 : 


| hrMts 新 增 的 元 素 


HTML5 新 增 的 元 素 和 属性 |_ HTMLS 新 增 的 主体 结构 元 素 


pubdate 属 性 


HTML5 新 增 的 非 主体 结构 元 素 


L11 认识 HTML5 | 


HIML5 本 身 并 非 技 术 ， 而 是 标准 。 HTML5 将 成 为 HIML、XHTML 以 及 
HIML DOM 的 新 标准 。 它 所 使 用 的 技术 早已 很 成 熟 ， 国内 通常 所 说 的 HIML5 
实际 上 是 HTMLI 与 CSS3 及 JavaScript 和 API 等 的 组 合 ， 可 用 以 下 公式 说 明 : 
HIMLS=HIML+CSS3+JavaScriptHAPI。 


国 1.1.1 HTML 发 展 历程 


HTML5 是 对 标准 通用 标记 语言 下 的 一 个 应 用 超 文 本 标记 语言 (HIML) 的 第 五 次 
重大 修改 。HTML5 是 近 10 年 来 Web 开发 标准 的 最 新 成 果 。 较 之 以 前 版 本 不 同 的 是 ， 
HTML5 不 仅 用 来 表示 Web 内容 , 其 功能 也 将 Web 带 到 一 个 新 的 成 熟 的 平台 ,在 HTML5 中 ， 
视频 、 音 频 、 图 像 、 动 画 以 及 同 计算 机 的 交互 都 被 标准 化 。 

HIML 上 一 个 标准 自 1999 年 12 月 发 布 HIML4.01， 后 继 的 HIML5 和 其 他 标准 
被 束 之 高 间 ， 为 了 推动 Web 标准 化 运动 的 发 展 ， 一 些 公司 联合 起 来 ， 成 立 了 一 个 叫 
作 Web Hypertext Application Technology Working Group (Web 超 文 本 应 用 技术 工作 
组 -WHATWG) 的 组 织 。WHATWG 致力 于 Web 表单 和 应 用 程序 ， 而 W3C (World Wide 
Web Consortium， 万 维 网 联盟 ) 专注 于 XHTML2.0。 在 2006 年 ， 双 方 决定 进行 合作 ， 来 
创建 一 个 新 版 本 的 HIML。 这 个 新 版 本 的 HTML 就 是 今天 所 熟知 的 HTML5。 

HIML5 是 HIML 的 下 一 个 主要 修订 版 本 ， 现 在 正 处 于 发 展 阶段 。 目 标 是 取 
代 1999 年 所 制定 的 HIML4.01 和 XHTML1.0 标 准 ， 以 期 能 在 互联 网 应 用 高 速 发 展 
的 时 候 ， 使 网 络 标准 大 道 符合 当代 的 网 络 需求 。 A HTML5 实际 是 指 包 
括 HIML、CSS 和 JavaScript 在 内 的 一 套 技术 组 合 ， 以 期 能 够 减少 浏览 器 对 于 插件 的 
丰富 性 网 络 应 用 服务 (Plug-in-Based Rich Intemet Application,RIA), 如 Adobe Flash、 
Micsoft03.Silverlight 与 Oracle JavaFX 的 需求 ， 并 且 提 供 更 多 能 有 效 增强 网 络 应 用 
标准 集 。 

具体 来 说 ，HTML5 添加 了 很 多 语法 特征 ， 其 中 <audio>、<video> 和 <canvas> 元 素 ， 
同时 集成 了 SVG 内 容 。 这 些 元 素 是 为 了 更 容易 地 在 网 页 中 处 理 多 媒体 和 图 片 内 容 而 添 
加 的 。 其 他 新 的 元 素 包 括 <section>、<article>、<heade>、<nav> 和 <footer>， 是 为 了 丰 
富 文档 的 数据 内 容 。 新 的 属性 的 添加 也 是 为 了 同样 的 目的 ， 同 时 API 和 DOM 已 经 成 为 
HTML5 中 的 基础 部 分 。HIML5 还 定义 了 处 理 非法 文档 的 具体 细节 ， 使 得 所 有 浏览 器 和 

户 端 能 都 一 致 地 处 理 语法 上 的 错误 。 


wr 


国 1.1.2 HTML5 和 H5 的 区 别 


HTML5 是 一 个 技术 名 词 , HS 是 一 个 产品 名 词 。 所 以 , H5 指 的 不 是 HTML5, 再 次 科普 ， 
HTML5 并 不 是 一 项 技术 ， 而 是 一 个 标准 。 
标准 相当 于 学 生 准 则 手册 ， 可 以 按照 准则 行事 ， 甚 至 可 以 超出 准则 更 加 严格 地 要 求 
己 ， 也 可 以 不 按照 准则 来 ， 但 是 会 被 老师 训斥 ， 就 像 正 6 一样 ， 不 能 兼容 HTMLS5 中 的 一 
些 属性 。 


HTML5 入 门 必 备 


| 1.2 新 的 特性 


与 之 前 的 HIML 相 比 ，HTMLS5 中 增加 了 许多 新 的 特性 ， 这 些 新 特性 会 使 设计 更 加 方 


便 、 简 洁 。 


团 1.2.1 兼容 性 


HTML5 的 一 个 核心 理念 就 是 保持 一 切 新 特性 的 平滑 过 渡 。 一 旦 浏览 器 不 支持 HTML5 
的 某 项 功能 ， 针 对 该 项 功能 的 备用 方案 就 会 被 启用 。 另 外 ， 互 联网 上 有 些 HTML 文档 已 
经 存在 很 多 年 了 ， 因 此 ， 支 持 所 有 的 现存 HTML 文档 是 非常 重要 的 。HTMLS5 的 研究 者 们 
花费 了 大 量 的 精力 来 研究 HTML5 的 通用 性 。 很 多 开发 人 员 使 用 <div id=“header”> 来 标 
记 页 眉 区 域 ， 而 在 HIML5 当中 添加 一 个 <header> 就 可 以 解决 这 个 问题 。 

在 浏览 器 方面 , 支持 HIML5 的 浏览 器 包括 Firefox (火狐 浏览 器 ) 、IE9 及 其 更 高 版 本 
Chrome (谷歌 浏览 器 ) 、Safari、Opera 等 ;国内 的 各 种 基于 正 或 Chromium (Chrome 的 
工程 版 或 称 实验 版 ) 所 推出 的 360 浏览 器 、 搜 狗 浏 览 器 、QQ 浏览 器 、 猫 豹 浏览 器 等 国产 
浏览 器 同样 具备 支持 HTML5 的 能 力 。 

HTML5 将 会 取代 1999 年 制定 的 HTML 4.01、XHTML 1.0 标准 ， 以 期 能 在 互联 网 应 
用 迅速 发 展 时 ， 使 网 络 标准 达到 符合 当代 网 络 的 需求 ， 为 桌面 和 移动 平台 带 来 无 颖 衔接 的 


丰富 内 容 。 


园 1.2.2 化 繁 为 简 


化 繁 为 简 是 HTML5 的 实现 目标 ，HTMLS5 在 功能 上 做 了 以 下 几 方 面 改进 。 以 浏览 器 
的 基本 功能 代 蔡 复杂 的 JavaScript 代码 。 

®@ 重新 简化 了 DOCTYPE。 

e@ 重新 简化 了 字符 集 声明 。 

e@ 简单 而 强大 的 HIML5API。 

下 面 对 上 述 这 些 改进 进行 详细 介绍 。 

HTMLS5 在 实现 上 述 改变 的 同时 ， 其 规范 已 经 变 得 非常 强大 。HITML5 的 规范 实际 上 
要 比 以 往 任何 版 本 的 HTML 规范 都 要 明确 。 为 了 达到 在 未 来 几 年 能 够 实现 浏览 器 互通 的 
目标 ，HTMLS5 规范 制定 了 一 系列 定义 明确 的 行为 ， 任 何 歧义 和 含糊 的 规范 都 可 能 延缓 这 
一 目标 的 实现 。 
HTML5 规范 比 以 往 任 何 版 本 都 要 详细 ， 以 避免 造成 误解 。HIML5 规范 的 目 
标 是 完全 、 彻 底 地 给 出 定义 ， 特 别 是 对 Web 的 应 用 。 整 个 规范 非常 详尽 ， 超 过 了 
900 页 。 基 于 多 重 改进 过 的 、 强 大 的 错误 处 理 方案 ，HIML5 具备 了 良好 的 错误 处 理 
机 制 。 

HIML5 提倡 重大 错误 的 平缓 修复 ， 把 用 户 的 利益 放 在 第 一 位 。 比 如 ， 如 果 页 面 中 有 
错误 的 话 ， 在 以 前 可 能 会 影响 整个 页 面 的 展示 ， 而 在 HTML5 当中 则 不 会 出 现 这 种 情况 ， 
取而代之 的 是 以 标准 的 方式 显示 “breoken” 标 记 ， 这 要 归功 于 HTMLS5 中 精确 定义 的 错误 
恢复 机 制 。 


国 1.2.3 通用 访问 
通用 访问 有 三 个 原则 。 
(1) 可 访问 性 
出 于 对 残障 用 户 的 考虑 ，HTML 与 WAI(Web Accessibility Intiative ，Web 可 访问 性 倡 
议 ) 和 ARIA(Accessible Ritc Intemet Applicaions, 可 访问 的 富 Intemet 应 用 ) 做 到 了 紧密 结合 ， 
WAI-ARIA 中 以 屏幕 阅读 器 为 基础 的 元 素 已 经 被 添加 到 HIML 中 。 
(2) 媒体 中 立 
在 不 久 的 将 来 ，HTMLS5 的 所 有 功能 都 在 所 有 不 同 的 设备 和 平台 上 正常 运行 。 
(3) 支持 更 多 语种 
能 够 支持 更 多 语种 。 例 如 ， 新 的 <ruby> 标签 支持 在 东亚 页 面 排 版 中 会 用 到 Ruby 注释 。 


国 1.2.4 标准 改进 

HTML5 提供 了 一 些 新 的 元 素 和 属性 ， 例 如 <nav> (网 站 导航 栏 ) 和 <footer>。 这 种 
标签 将 有 利于 搜索 引擎 的 索引 整理 ， 同 时 也 能 更 好 地 帮助 小 屏幕 装置 和 视 障 人 士 使 用 。 除 
此 之 外 ， 还 为 其 他 浏览 要 素 提 供 了 新 的 功能 ， 如 <audio> 和 <vedio> 标签 。 

在 HTML5 中 ， 一 些 过 时 的 HTMI4 标签 将 被 取消 ， 其 中 包括 纯 显示 效果 的 标签 ， 如 
<font> 和 <center> 等 ， 这 些 变迁 已 经 被 CSS 所 取代 。 

HIML5 吸取 了 XHTML2 的 一 些 建议 ， 包 括 一 些 用 来 改善 文档 结构 的 功能 ， 例 如 一 
些 新 的 HTML 标签 一 -hrader、footer、section、dialog 和 aside 的 使 用 ， 使 得 内 容 创作 者 
能 够 更 加 轻松 地 创建 文档 ， 在 此 之 前 开发 人 员 在 这 些 场合 一 律 使 用 <div> 标签 。 

HTML5 还 包含 了 将 内 容 和 样式 分 离 的 功能 ，<b> 和 <i> 标签 仍然 存在 ， 但 是 它们 的 
意义 已 经 和 之 前 有 了 很 大 的 不 同 ， 这 些 标签 的 意义 只 是 为 了 将 一 段 文字 标识 出 来 ， 而 不 是 
单纯 为 了 设置 粗 体 和 和 斜体 文字 样式 。<u>、<font>、<center> 和 <strike> 这 些 标签 则 完全 被 
废弃 了 。 

新 标准 使 用 了 一 些 全 新 的 表单 输入 对 象 ， 包 括 日 期 、URL 和 E-mail 地 址 ， 其 他 的 对 
象 则 增加 了 对 拉丁 字符 的 支持 。HTML 还 引入 了 微 数据 ， 一 种 使 用 机 器 可 以 识别 的 标签 标 
注 内 容 的 方法 ， 使 语义 Web 的 处 理 更 为 简单 。 总 的 来 说 ， 这 些 与 结构 有 关 的 改进 有 助 于 
开发 人 员 创 建 更 干净 、 更 容易 管理 的 网 页 。 

HTMLS5 具备 全 新 的 、 更 合理 的 tag， 多 媒体 对 象 不 再 全 部 被 绑 定 到 object 中 ， 而 是 视 
频 有 视频 的 tag， 音 频 有 音频 的 tag。 

Canvas 对 象 将 给 浏览 器 带 来 直接 在 上 面 绘制 矢量 图 的 功能 ， 这 意味 着 用 户 可 以 脱离 
flash 和 silverlight， 直 接 在 浏览 器 中 浏览 图 形 和 动画 。 很 多 最 新 的 浏览 器 ， 除 了 正 ， 都 已 
经 支持 canvas。 浏 览 器 中 的 真正 程序 将 提供 API 浏览 器 内 的 编辑 、 拖 放 以 及 各 种 图 形 用 户 
界面 的 能 力 。 内 容 修 饰 tag 将 被 移 除 ， 而 使 用 CSS。 


L13 为 何 使 用 HTML5 | 


HIML5 与 以 往 的 HIML 版 本 不 同 , HTML5 在 字符 集 / 元 素 和 属性 等 方面 做 了 大 量 改进 。 
在 讨论 HIMLS 编程 之 前 ， 首 先 了 解 HTML5 的 一 些 优势 ， 以 便 为 后 面 的 编程 做 好 铺垫 。 


HTML5 入 门 必 备 


国 1.3.1 页 面 的 交互 性 能 更 强大 
HTMLS 与 之 前 的 版 本 相 比 ， 在 交互 上 做 了 很 大 文章 。 以 前 所 能 看 见 的 页 面 中 的 文字 
都 是 只 能 看 ， 不 能 修改 。 而 在 HTMLS 中 只 需要 添加 一 个 contenteditable 属性 ， 即 可 对 所 
见 页 面 内 容 进行 编辑 ， 代 码 如 图 1-1 所 示 。 


<!IDOCTYPE html> 
2 xhtml lange"en"> 


3 <head> 
<meta charsete"UTF-8"> 
<title>Docunent</title> 
6 </head> 


7 <body> 
3 <p> 我 们 是 一 行 只 能 让 用 户 阅 读 不 能 袜 用 户 编辑 的 文字 ! 
9 <p contenteditable="true"> 我 们 是 一 -村 噬 可 以 证 用 户 坑 香 可 以 让 用 户 编辑 的 文字 1 </p> 
10 </body> 
a /htnl> 
图 1-1 


只 需要 在 p 标签 内 部 加 入 contenteditable 属性 ， 且 让 其 值 为 真 即 可 。 在 浏览 器 中 显示 
的 效果 如 图 1-2 所 示 。 


D Document 
~ 访 CG DD filey///C:/Users/Administrator/Desktop/ 前 端 书 案例 /编辑 网 页 文本 .html 


我 们 是 一 行 只 能 让 用 户 阅读 不 能 被 用 户 编辑 的 文字 ! 
工人 是 一 行 既 可 以 让 用 户 阅读 也 能 被 用 户 编辑 的 文字 ! 我 是 在 页 面 中 直接 编辑 的 文本 [了 


图 1-2 


通过 图 1-2 可 以 看 出 ，HTML5 在 交互 方面 为 用 户 提供 了 很 大 便利 与 权限 ， 但 是 
HTML5 的 强大 交互 远 不 止 这 一 点 。 除 了 对 用 户 展现 出 了 非常 友好 的 态度 之 外 ， 其 对 开发 
者 也 非常 友好 。 例 如 ， 在 一 个 文本 框 输入 提示 字 提 醒 用 户 “ 请 输入 您 的 账号 ”等 这 样 的 
操作 ， 以 前 需要 编写 大 量 的 javaScript 代码 来 完成 这 一 操作 ， 但 是 在 HIML5 中 只 需要 一 
个 “placeholder” 属 性 即 可 轻松 搞定 ， 为 开发 人 员 节省 了 大 量 时 间 与 精力 。 代 码 如 图 1-3 
所 示 。 


1 <!DOCTYPE html> 

2 <html lang="en"> 

3 <head> 

4 <meta charset="UTF-8"> 

时 <title>Document</title> 

6 </head> 

7 <body> 

8 <form action="#" method="post"> 

9 <p><input type="text”value="”placeholder=" 请 输入 您 的 用 户 名 "></p> 
19 <p><input type="password”value="”placeholder=" 请 输入 您 的 密码 "></p> 
11 </form> 

a </body> 

13 </html> 


代码 的 运行 效果 如 图 1-4 所 示 。 


D Document 


CG [file///C:/Users/Administrator/Desktop, 


[BSR] 
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HTMLS5 除了 为 用 户 和 开发 人 员 提 供 了 便利 ， 还 考虑 到 各 大 浏览 器 厂商 。 例 如 ， 以 前 
要 在 网 页 中 看 视频 , 在 浏览 器 当中 是 需要 flash 插件 的 , 这 样 无 形 中 就 增加 了 浏览 器 的 负担 ， 
而 现在 只 需要 一 个 简单 的 vedio 即 可 满足 用 户 在 网 页 中 看 视频 的 需求 。 


轩 1.3.2 字符 集 和 DOCTYPE 的 改进 
HTMLS5 在 字符 集 上 有 了 很 大 改进 ， 下 面 代码 表述 的 是 以 往 的 字符 集 。 
<meta http-equiv="content-type" content="text/html;charset-utf-8"> 


上 述 代码 经 过 简化 后 ， 可 表述 为 下 面 代码 的 形式 。 


<meta charset= "utf-8"> 


除了 字符 集 的 改进 之 外 ，HTML5 还 使 用 了 新 的 DOCTYPE。 在 使 用 了 新 的 
DOCTYPE 之 后 ， 浏 览 器 默认 以 标准 模式 显示 页 面 。 例 如 ， 在 Firefox 浏览 器 打开 一 个 
HTMLS5 页 面 ， 执 行 “ 工 具 | 页 面 信息 ”命令 ， 会 看 到 如 图 1-5 所 示 的 页 面 。 


安全 


mame: 
地 址 : eVWEVJS%6E5%6A4%68796E8%AF3%6BE/DEMO/day08/%6E6%689968B%E5968A3%6A89%6E4: 
类 型 


名 称 内 容 


图 1-5 


国 1.3.3 HTML5 的 优势 


使 用 HIMLS 的 原因 如 下 。 
(1) 简单 
HTML5 使 创建 网 站 更 加 简单 。 新 的 HIML 标签 像 <header><footer><nav><section> 


下 人 


HTML5 入 门 必 备 


<aside> 等 ， 使 得 阅读 者 访问 内 容 更 加 容易 。 在 以 前 ， 即 使 定义 了 class 或 者 id， 阅读 者 也 
没有 办 法 去 了 解 给 出 的 一 个 div 究竟 是 什么 。 使 用 新 的 语义 学 的 定义 标签 ， 不 仅 可 以 更 好 
地 了 解 HIML 文档 ， 而 且 能 够 创建 更 好 的 使 用 体验 。 

(2) 视频 和 音频 支持 

以 前 想 要 在 网 页 上 实现 视频 和 音频 的 播放 都 需要 借助 flash 等 第 三 方 插件 完成 ， 而 在 
HIML5 中 可 以 直接 使 用 标签 <video> 和 <audio> 来 访问 资源 。HTML5 视频 和 音频 标签 
基本 将 它们 视 为 图 片 : <video src=”” 人 和。 而 其 他 参数 ， 例 如 宽度 和 高 度 或 者 自动 播放 只 
需要 像 其 他 HTML 标签 一 样 定义 : <video src=”url” width=”640px” height=”380px” 
autoplay/> 即 可 。 

HIML5 把 以 前 非常 烦琐 的 过 程 变 得 非常 简单 ， 然 而 一 些 过 时 的 浏览 器 可 能 对 HIML5 
的 支持 度 并 不 是 很 友好 ， 需 要 添加 更 多 代码 来 让 它们 正确 工作 。 但 是 这 个 代码 还 是 比 
<embed> 和 <object> 简单 得 多 。 

(3) 文档 声明 

没 错 ， 就 是 doctype， 没 有 更 多 内 容 了 。 不 需要 拷贝 粘贴 一 堆 无 法 理解 的 代码 ， 也 没 
有 多 余 的 head 标签 。 而 且 除 了 简单 ， 它 能 在 每 一 个 浏览 器 中 正常 工作 ， 即 使 是 名 声 狼藉 
的 正 6 也 没有 问题 。 

(4) 结构 清晰 语义 明确 的 代码 

如 果 你 对 于 简单 、 优 雅 、 容 易 阅 读 的 代码 有 所 偏好 的 话 ，HIML5 绝对 是 一 个 为 你 量 
身 定 做 的 软件 。HIML5 允许 写 出 简单 清晰 、 富 于 描述 的 代码 。 符 合 语义 学 的 代码 允许 你 
分 开 样式 和 内 容 。 下 面 是 典型 的 简单 拥有 导航 的 heaer 代码 : 

<divid="header"> 

<h1l>Header Text</h1> 


<divid="nav"> 

<ul> 

<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
</ul> 

</div> 


</div> 


是 不 是 很 简单 ? 但 是 使 用 HTML5 后 会 使 得 代码 更 加 简单 并 且 富 有 含义 : 


<header> 

<h1>Header Text</h1> 

<nav> 

<ul> 

<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
</ul> 

</nav> 


</header> 


使 用 HTML5 可 以 通过 使 用 语义 学 的 HIML header 标签 描述 内 容 来 解决 div 及 其 


class 定义 问题 。 以 前 需要 大 量 地 使 用 div 来 定义 每 一 个 页 面 内 容 区 域 ， 但 是 使 用 新 的 
<section><article><header><footer><aside> 和 <nav> 标签 ， 会 使 代码 更 加 清晰 且 易 于 
阅读 。 
(5) 强大 的 本 地 存储 
HIML5 中 引入 了 新 特性 本 地 存储 ， 这 是 一 个 非常 酷 炫 的 新 特性 ， 有 一 点 像 比较 老 
的 技术 cookie 和 客户 端 数据 库 的 融合 。 但 是 它 比 cookie 更 好 用 ， 存 储量 也 更 加 庞大 ， 
因为 支持 多 个 Windows 存储 ， 使 它 拥有 更 强 的 安全 性 能 ， 而 且 关 闭 浏览 器 后 也 可 以 保存 
本 地 存储 是 HIML5 工具 中 一 个 不 需要 第 三 方 插件 就 能 实现 的 功能 。 将 数据 保存 到 浏 
览 器 中 意味 可 以 简单 地 创建 一 些 应 用 特性 。 例 如 : 保存 用 户 信息 ， 缓 存 数 据 ， 加 载 用 户 上 
次 的 应 用 状态 。 
(6) 交互 升级 
HTML5 中 的 <canvas> 标签 允许 做 更 多 的 互动 和 动画 ， 就 像 使 用 Flash 达到 的 效果 ， 
经 典 游戏 一 水 果 忍 者 就 可 以 通过 canvas 画图 功能 来 实现 。 
(7) HTML5 游戏 
前 几 年 ， 基于 HTMLS5 开发 的 游戏 非常 火爆 。 近 两 年 虽然 基于 HTML5 的 游戏 受到 了 
不 小 的 冲击 , 但 是 如 果 能 找到 合适 的 盈利 模式 , HTML5 依然 是 手机 端 开发 游戏 的 首选 技术 。 
(8) 移动 互联 网 
如 今 移动 设备 已 经 占领 世界 ， 使 用 手机 支付 ， 使 用 手机 端 订购 外 卖 ， 这 意味 着 今后 传 
统 的 PC 机 将 会 面临 巨大 的 挑战 ，HTML5 是 最 移动 化 的 开发 工具 。 其 很 多 的 meta 标签 允 
许 用 户 优化 移动 :viewport: 允许 用 户 定 义 viewport 宽度 并 进行 缩放 设置 ;全屏 浏览 器 : 
ISO 指定 的 数值 允许 Apple 设备 以 全 屏 模式 显示 ; Home screen icons: 就 像 桌 面 收 藏 ， 这 些 
图 标 可 以 用 来 添加 收藏 到 ISO 和 Android 移动 设备 的 首页 上 。 
(9) HTML5 既是 现在 也 是 未 来 
HTML5 是 当今 世界 上 最 火热 的 前 端 开 发 技术 ! 其 更 多 的 元 素 已 经 被 很 多 公司 采 
并 且 已 经 开发 得 很 成 熟 。 
HTML5 使 书写 代码 变 得 简单 清晰 ， 改 变 了 用 户 书写 代码 的 方式 及 其 设计 方式 。 


| 1.4 ”元 素 的 分 类 | 


HTML5 新 增 了 很 多 元 素 ， 也 废除 了 不 少 元 素 。 根 据 现 有 的 标准 规范 ， 把 HTML5 
的 元 素 按 等 级 定义 为 结构 性 元 素 、 级 块 性 元 素 、 行 内 语义 性 元 素 和 交互 性 元 素 四 
大 类 。 


围 1.4.1 结构 性 元 素 


结构 性 元 素 主 要 负责 Web 的 上 下 文 结 构 定义 ， 确 保 HIML 文档 的 完整 性 ， 这 类 元 素 
包括 以 下 几 个 。 

@ Section: 在 Web 页 面 应 用 中 ， 该 元 素 可 用 于 区 域 的 章节 表述 。 

@ Header: 页 面 主体 上 的 头 部 ， 注 意 区 别 于 head 元 素 。 可 以 给 初学 者 提供 


HTML5 入 门 必 备 


一 个 小 技巧 用 来 区 分 ，head 元 素 中 的 内 容 往往 是 不 可 见 的 ，header 元 素 
往往 在 一 对 body 元 素 之 中 。 

@ Footer: 页 面 底部 ， 通 常会 在 这 里 标 出 网 站 的 一 些 相关 信息 。 例 如 ， 关 
于 我 们 、 法 律 声 明 、 邮 件 信息 和 管理 入 口 等 。 

@ Nav: 是 专门 用 于 菜单 导航 、 链 接 导航 的 元 素 。 是 Navigator 的 缩写 。 

@ Article: 用 于 表示 一 篇 文章 的 主体 内 容 ， 一 般 是 文字 集中 显示 的 区 域 。 


图 1.4.2 ”级 块 性 元 素 


级 块 性 元 素 主 要 完成 Web 页 面 区 域 的 划分 ， 以 确保 内 容 的 有 效 分 隔 ， 这 类 元 素 包括 
以 下 几 个 。 

@ Aside: 用 于 表示 注 记 、 贴 士 、 侧 栏 、 摘 要 、 插 入 、 引 用 等 作为 补充 主体 
的 内 容 。 从 一 个 简单 页 面 显 示 上 看 ， 就 是 侧 边栏 ， 可 以 在 左边 ， 也 可 以 
在 右边 。 从 一 个 页 面 的 局 部 看 ， 就 是 摘要 。 

@ Figure: 是 对 多 个 元 素 组 合并 展示 的 元 素 ， 通 常 与 figcaption 组 合 使 用 。 

@ Code: 表示 一 段 代码 块 。 

@ Dialog: 用 于 表达 人 与 人 之 间 的 对 话 ， 该 元 素 还 包括 dt 和 dd 这 两 个 组 合 
元 素 ， 它 们 常常 同时 使 用 ，dt 用 于 表示 说 话 者 ， 而 dd 则 用 来 表示 说 的 
内 容 。 


国 1.4.3 行内 语义 性 元 素 


行内 语义 性 元 素 主 要 完成 Web 页 面具 体内 容 的 引用 和 表示 ， 是 丰富 内 容 展示 的 基础 ， 
这 类 元 素 包括 以 下 几 个 。 

@ Meter: 表示 特定 范围 内 的 数值 ， 可 用 于 工资 、 数 量 、 百 分 比 等 。 

e Time: 表示 时 间 值 。 

@ Progress: 用 来 表示 进度 条 , 可 通过 对 其 max、min、step 等 属性 进行 控制 ， 
完成 进度 的 表示 和 监视 。 

@ Video: 视频 元 素 ， 用 于 支持 和 实现 视频 文件 的 直接 播放 ， 支 持 缓冲 预 载 
和 多 种 视频 媒体 格式 ， 如 MPEG-4、OGGV 和 WEBM 等 。 

®@ Audio: 音频 元 素 ， 用 于 支持 和 实现 音频 文件 的 直接 播放 ， 支 持 缓冲 预 载 
和 多 种 音频 媒体 格式 。 


国 1.4.4 ”交互 性 元 素 


交互 性 元 素 主 要 用 于 功能 性 的 内 容 表达 ， 会 有 一 定 的 内 容 和 数据 的 关联 ， 是 各 种 事件 
的 基础 ， 这 类 元 素 包 括 以 下 几 个 。 
@ ”Details: 用 来 表示 一 段 具 体 的 内 容 ， 但 是 内 容 可 能 默认 不 显示 ， 通 过 某 
种 手段 (如 单 击 ) legend 交互 才 会 显示 。 
@ Datagrid: 用 来 控制 客户 端 数据 与 显示 ， 可 以 由 动态 脚本 及 时 更 新 。 
@ Menu: 主要 用 于 交互 表单 。 
@ Command: 用 来 处 理 命令 按钮 。 


| 15 ”新 增 元 素 


在 HTML5 中 ， 增 加 了 以 下 元 素 。 使 用 这 些 新 的 元 素 ， 前 端 设计 人 员 可 以 更 加 省 力 和 
高 效 地 制作 出 视觉 良好 的 网 页 。 下 面 对 所 有 新 增 元 素 的 使 用 方法 进行 介绍 。 

(1) section 元 素 

<section> 标签 定义 文档 中 的 节 〈section、 区 段 ) 。 比 如 章节 、 页 层 、 页 脚 或 文档 中 的 
其 他 部 分 。 

在 HIML4 中 ，div 元 素 与 section 元 素 具有 相同 的 功能 ， 其 语法 格式 如 下 : 


<div>...</div> 


示例 代码 如 下 : 


<div>HTML5+CSS3</div> 
在 HTML5 中 ，section 语法 格式 如 下 : 
<section>...</section> 
示例 代码 如 下 : 
<section>HTML5+CSS3</section> 
(2) article 元 素 
<article> 标签 定义 外 部 的 内 容 。 
外 部 内 容 可 以 是 来 自 一 个 外 部 新 闻 提供 者 的 一 篇 新 的 文章 ， 或 者 来 自 blog 的 文本 ， 
或 者 是 来 自 论坛 的 文本 ， 抑 或 是 来 自 其 他 外 部 的 源 内 容 。 
在 HTML4 中 ，div 元 素 与 article 元 素 具有 相同 的 功能 ， 其 语法 格式 如 下 : 


<div>...</div> 
示例 代码 如 下 : 
<div>HTML5</div> 
在 HIML5 中 ，article 语法 格式 如 下 : 
< article >...</ article > 
示例 代码 如 下 : 
< article >HTML5+CSS3</ article > 


(3) aside 元 素 

<aside> 元 素 用 于 表示 article 元 素 内 容 之 外 的 ， 并 且 与 aside 元 素 的 内 容 相关 的 一 些 辅 
助 信息 。 

在 HIML4 中 ，div 元 素 与 aside 元 素 具有 相同 的 功能 ， 其 语法 格式 如 下 : 


<div>...</div> 
示例 代码 如 下 : 


<div>HTML5+CSS3</div> 
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在 HIML5 中 ，aside 语法 格式 如 下 : 
<aside >...</ aside> 
示例 代码 如 下 : 
<aside >HTML5+CSS3</ aside > 
(4) header 元 素 
<header> 元 素 表示 页 面 中 一 个 内 容 区 域 或 整个 页 面 的 标题 。 
在 HTML4 中 ，div 元 素 与 header 元 素 具 有 相同 的 功能 ， 其 语法 格式 如 下 : 
<div>...</div> 
示例 代码 如 下 : 
<div>HTMLS+CSS3</div> 
在 HTML5 中 ，header 语法 格式 如 下 : 
<header>...</header> 
示例 代码 如 下 : 
<header>HTML5+CSS3</header> 


(5) fhgroup 元 素 
<fhgroup> 元 素 用 于 组 合 整个 页 面 或 页 面 中 一 个 内 容 区 块 的 标题 。 
在 HIML4 中 ，div 元 素 与 fhgroup 元 素 具有 相同 的 功能 ， 其 语法 格式 如 下 : 


<div>...</div> 

示例 代码 如 下 : 

<div>HTML5 学 习 指南 </div> 

在 HIML5 中 ， 亿 group 语法 格式 如 下 : 
<fhgroup>...</fhgroup> 
示例 代码 如 下 : 
<fhgroup>HTML5+CSS3</fhgroup> 


(6) footer 元 素 
<footer> 元 素 用 于 组 合 整个 页 面 或 页 面 中 一 个 内 容 区 块 的 脚注 。 
在 HTML4 中 ，div 元 素 与 footer 元 素 具有 相同 的 功能 ， 其 语法 格式 如 下 : 
<div>...</div> 
示例 代码 如 下 : 
<div> 
XXX 大 学 计算 机 系 2016 届 学 员 <br/> 
李磊 <br/> 
139xxxx2505<br/> 
2017-03-12 


</div> 
在 HTML5 中 ，footer 语法 格式 如 下 : 
<footer>...</footer> 


示例 代码 如 下 : 


<footer> 

XXX 大 学 计算 机 系 2016 局 学 员 <br/> 
李磊 <br/> 

139xxxx25/05<br/> 

2017-03-12 

</footer> 


(7) nav 元 素 

<nav> 标签 定义 导航 链接 的 部 分 。 

在 HTML4 中 ， 使 用 书 元 素 蔡 代 na 
元 素 ， 其 语法 格式 如 下 : 


<ul>...</ul> 


示例 代码 如 下 : 


<ul> 

<li>items01</li> 
<li>items02</li> 
<li>items03</li> 
<li>items04</li> 


</ul> 

在 HTML5 中 ，nav 语法 格式 如 下 : 
<nav>...</nav> 

示例 代码 如 下 : 


<nav> 

<a href="">items01</a> 
<a href="">items02</a> 
<a href="">items03</a> 
<a href="">items04</a> 


</nav> 


(8) figure 元 素 
<figure> 标签 用 于 对 元 素 进行 组 合 。 
在 HIML4 中 ， 示 例 代码 如 下 : 


<dl> 
<h1>HTML5</h1> 
<p>HTML5 是 当今 最 流行 的 网 络 应 用 技术 


= 
</dl> 


在 HTML5 中 ，figure 使 用 范例 如 下 : 


<figure> 
<figcaption>HTML5</figcaption> 
<p>HTML5 是 当今 最 流行 的 网 络 应 用 技术 
之 一 </p> 

</figure> 


(9) video 元 素 
<video> 标签 用 于 定义 视频 ， 例 如 电影 


片段 等 。 


在 HTML4 中 ， 示 例 代码 如 下 : 


<object data="movie.mp4" type="video/ 
mp4"> 


<param name="" value="movie.mp4"> 


</object> 


在 HTML5 中 ，video 使 用 范例 如 下 : 


<video width="320" height="240" controls> 

<source src="movie.mp4" type="video/ 
mp4"> 

<source src="movie.ogg" type="video/ogg"> 


您 的 浏览 器 不 支持 video 标签 。 
</video> 


(10) audio 元 素 
<audio> 标签 


定义 音频 ， 例 如 歌曲 


片段 等 。 


在 HIML4 中 ， 示 例 代 码 如 下 : 


<object data="music.mp3" type="application/ 
mp3"> 
<param name="" value="music.mp3"> 


</object> 


在 HTML5 中 ，audio 使 用 范例 如 下 : 


<audio controls> 

<source src="music.mp3" type="audio/ 
mp4"> 

<source src="music.ogg" type="audio/ogg"> 


您 的 浏览 器 不 支持 audio 标签 。 


[PE 


HTML5 入 门 必 备 


</audio> 


(11) embed 元 素 
<embed> 标签 定义 谋 入 的 内 容 ， 比 如 插件 。 
在 HTML4 中 ， 示 例 代 码 如 下 : 


‘<object data="flash.swf" type="application/x-shockwave-flash"></object> 
在 HTML5 中 ，embed 使 用 范例 如 下 : 
<embed src="helloworld.swf" /> 


(12) mark 元 素 
<mark> 元 素 主 要 突出 显示 部 分 文本 。 
在 HTML4 当中 ，span 元 素 与 mark 元 素 具有 相同 的 功能 ， 其 语法 格式 如 下 : 


<span>...</span> 
示例 代码 如 下 : 
<span>HTML5 技术 的 运用 </span> 


在 HTML5 中 ，mark 元 素 的 语法 如 下 : 


<mark>...</mark> 
示例 代码 如 下 : 
<mark>HTML5 技术 的 运用 </mark> 
(13) progress 元 素 
<progress> 元 素 表示 运行 中 的 进程 ， 可 以 使 用 progress 元 素来 显示 javascript 中 耗费 时 
间 函 数 的 进程 。 
在 HIML5 中 ，progress 元 素 的 语法 如 下 : 


<progress></progress> 


progress 元 素 是 HTML5 中 新 增 的 元 素 ，HTML4 没有 相应 的 元 素来 表示 。 
(14) meter 元 素 

<meter> 元 素 表示 度量 衡 ， 仅 用 于 已 知 最 大 值 和 最 小 值 的 度量 。 

在 HTML5 中 ，meter 元 素 的 语法 如 下 : 


<meter></meter> 
meter 元 素 是 HTML5 中 新 增 的 元 素 ，HTMIL4 没有 相应 的 元 素来 表示 。 
(15) time 元 素 
<time> 元 素 表示 日 期 和 时 间 


在 HTML5 中 ，time 元 素 的 语法 如 下 : 
<time></time> 


time 元 素 是 HTMLS5 中 新 增 的 元 素 ，HTMIL4 没有 相应 的 元 素来 表示 。 
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(16) wbr 元 素 
<wbr> (Word Break Opportunity) 标签 规定 在 文本 中 的 何 处 适合 添加 换行 符 。 


在 HIML5 中 ，wbr 元 素 的 语法 如 下 : 


<p> 尝试 缩小 浏览 器 窗口 ， 以 下 段 滞 的 “XMLHttpRequest" 单词 会 被 分 行 : </p> 
<p> 学 习 AJAX, 您 必须 熟悉 <wbr>Http<wbr>Request 对 象 。</p> 

<p><b> 注意 :</b> IE 浏览 器 不 支持 wbr 标签 。</p> 

wbr 元 素 是 HTMLS 中 新 增 的 元 素 ，HTML4 没有 相应 的 元 素来 表示 。 


(17) canvas 元 素 
<canvas> 标签 定义 图 形 ， 比 如 图 表 和 其 他 
在 HTML5 中 ，canvas 元 素 的 语法 如 下 : 


四 


像 ， 必 须 使 用 脚本 来 绘制 图 形 。 


<canvas id="myCanvas" width="500" height="500"></canvas> 


canvas 元 素 是 HTMLS 中 新 增 的 元 素 ，HTML4 没有 相应 的 元 素来 表示 。 


(18) command 元 素 
<command> 标签 可 以 定义 用 户 可 能 调用 的 命令 〈 比 如 单 选 按钮 、 复 选 框 或 按钮 ) 。 


在 HIML5 中 ，command 元 素 的 语法 如 下 : 


<command onclick="cut()" label="cut"/> 


command 元 素 是 HTML5 中 新 增 的 元 素 ，HTML4 没有 相应 的 元 素来 表示 。 
(19) datalist 元 素 

<datalist> 标签 规定 了 <input> 元 素 可 能 的 选项 列表 。 

datalist 元 素 通常 与 input 元 素 配 合 使 用 。 
在 HIML5 中 ，datalist 元 素 的 语法 如 下 : 


<input list="browsers"> 

<datalist id="browsers"> 

<option value="Internet Explorer"> 
<option value="Firefox"> 

<option value="Chrome"> 

<option value="Opera"> 

<option value="Safari"> 
</datalist> 


datalist 元 素 是 HIML5 中 新 增 的 元 素 ，HIML4 没有 相应 的 元 素来 表示 。 


(20) details 元 素 
<details> 标签 规定 了 用 户 可 见 的 或 者 隐藏 的 需求 的 补充 细节 。 
<details> 标签 用 来 供用 户 开启 关闭 的 交互 式 控件 。 任 何 形式 的 内 容 都 能 被 放 在 


<details> 标签 里 面 。 
<details> 元 素 的 内 容 对 用 户 是 不 可 见 的 ， 除 非 设置 了 open 属性 。 
在 HIML5 中 ，details 元 素 的 语法 如 下 : 


<details> 
<summary>Copyright 1999-2011.</summary> 


HTML5 入 门 必 备 


<p> - by Refsnes Data. All Rights Reserved.</p> 
<p>All content and graphics on this web site are the property ofthe company Refsnes </p> 
</details> 
details 元 素 是 HIML5 中 新 增 的 元 素 ，HTML4 没有 相应 的 元 素来 表示 。 
(21) datagrid 元 素 
<datagrid> 标签 表示 可 选 数据 的 列表 ， 它 以 树 形 列表 的 形式 来 显示 。 
在 HIML5 中 ，datagrid 元 素 的 语法 如 下 : 
<datagrid>...</datagrid> 


datagrid 元 素 是 HTMLS5 中 新 增 的 元 素 ，HTML4 没有 相应 的 元 素来 表示 。 
(22) keygen 元 素 
<keygen> 标签 用 于 生成 密 钥 。 

在 HIML5 中 ，keygen 元 素 的 语法 如 下 : 

<keygen> 
keygen 元 素 是 HTMLS5 中 新 增 的 元 素 ，HTML4 没有 相应 的 元 素来 表示 。 
(23) output 元 素 
<output> 元 素 表示 不 同类 型 的 输出 ， 例 如 脚本 的 输出 。 

在 HIML5 中 ，output 元 素 的 使 用 代码 如 下 : 

<output></output> 

在 HTML4 中 ，output 应 用 示例 代码 如 下 : 

<span></span> 

(24) source 元 素 


<Source> 元 素 用 于 为 媒介 元 素 定义 媒介 资源 。 
在 HIML5 中 ，source 元 素 的 示例 代码 如 下 : 


<source type="" src=""/> 


在 HIML4 中 ，source 元 素 的 示例 代码 如 下 : 
<param> 


(25) menu 元 素 
<menu> 元 素 表示 菜单 列表 。 在 希望 列 出 表单 控件 时 使 用 该 标签 。 
在 HIML5 中 ，menu 元 素 的 示例 代码 如 下 : 


<menu> 
<li>items01</li> 
<li>items02</li> 


</menu> 


在 HIMLS 中 
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hp 不 仅 新 增 了 许多 元 素 ， 还 新 增 了 一 些 属性 ， 新 增 的 这 些 属性 中 ， 表 单 的 


属性 最 为 


要 ， 下 面 进行 具体 讲解 。 


国 1.6.1 表单 相关 属性 


在 HTML5 中 ， 表 单 新 增 属性 如 下 。 


autofocus 属性 : 该 属性 可 以 用 在 input (type=text，select，textarea， 
button ) 元 素 当 中 。 autofocus 属性 可 以 让 元 素 在 打开 页 面 时 自动 获得 焦点 。 


placeholder 属性 : 该 属性 可 以 用 在 input( 


type=textpassword,textarea) 元 素 


当中 ， 使 用 该 属性 会 对 用 户 的 输入 进行 提示 ， 通 常用 于 提示 用 户 可 以 输 


入 的 内 容 。 


form 属性 : 该 属性 用 在 input、output、select、textarea、button 和 fieldset 


元 素 当 中 。 


Required 属性 : 该 属性 用 在 input(type=text) 元 素 和 textarea 元 素 当 中 ， 
表示 用 户 提交 时 进行 检查 ， 检 查 该 元 素 内 一 定 要 有 输入 内 容 。 


在 input 元 素 与 button 元 素 中 增加 了 新 


属性 formaction、formenctype、 


formmethod、formnovavalidate 与 formtarget， 这 些 属 性 可 以 重 载 form 元 
素 的 action、enctype、method、novalidate 与 target 属性 。 


在 input 元 素 、button 元 素 和 form 元 素 中 增加 了 novalidate 属性 ， 该 属性 


可 以 取消 提交 时 进行 的 有 关 检 查 ， 表 单 可 


园 1.6.2 其 他 相关 属性 


在 HIML5 中 ， 新 增 的 与 链接 相关 的 其 他 属性 分 别 
在 a 与 area 元 素 中 增加 了 media 属性 ， 该 属性 规定 目标 URL 是 用 什么 


类 型 的 媒介 进行 优化 的 。 


以 被 无 条 件 地 提交 。 


如 下 。 


在 area 元 素 中 增加 了 hreflang 属性 与 rel 
素 的 一 致 。 


属性 ， 以 保持 与 a 元 素 和 link 元 


在 link 元 素 中 增加 了 sizes 属性 。 该 属性 用 于 指定 关联 图 标 (icon 元 素 ) 


的 大 小 ， 通 常 可 以 与 icon 元 素 结合 使 用 。 


在 base 元 素 中 增加 了 target 属性 ， 主 要 目的 是 保持 与 该 元 素 的 一 致 性 。 


在 meta 元 素 中 增加 了 charset 属性 ， 该 属性 为 文档 的 字符 编码 的 指定 提 


供 了 一 种 良好 的 方式 。 


在 meta 元 素 中 增加 了 type 和 label 两 个 属性 。label 属性 为 菜单 定义 一 


可 见 的 标注 ，type 属性 让 菜单 可 以 以 上 
种 形式 出 现 。 


下 文 菜单 、 工 具 条 与 列表 菜单 3 


在 style 元 素 中 增加 了 scoped 属性 ， 用 来 


规定 样式 的 作用 范围 。 


在 script 元 素 中 增加 了 async 属性 ， 该 
执行 。 


属性 用 于 定义 脚本 是 否 异 步 
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HTML5 入 门 必 备 


| 17 课堂 练习 | 


课堂 练习 为 大 家 准备 了 一 个 新 增 的 主体 结构 元 素 nav 的 用 法 ， 请 制作 出 与 图 1-6 所 示 
相同 的 效果 。 


图 1-6 


1-6 效果 的 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title>nav 元 素 示例 </title> 

</head> 

<body> 

<nav> 

<ul> 

<li><a href="http://www.baidu.com"> 首页 </a></li> 
<li><a href="./ 个 人 信息 .html"> 个 人 信息 </a></li> 
<li><a href="#"> 购物 车 </a></li> 

<li><a href="#"> 浏览 记录 </a></li> 

</ul> 

</nav> 

</body> 

</html> 


强化 训练 


学 习 了 本 章 后 ， 相 信 大 家 对 
HIML5 中 新 增 属性 和 元 素 有 了 一 个 
全 新 的 认识 ， 下 面 的 练习 是 根据 本 节 
所 涉及 的 知识 设计 的 ， 请 根据 图 1-7 
所 示 ， 完 成 设计 。 


操作 提示 : 
上 图 中 主要 表现 的 是 section 元 素 和 
article 元 素 的 区 别 ， 提 示 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>article&section</title> 
<style> 

*{text-align: center; } 
</style> 

</head> 

<body> 

<article> 

<hgroup> 

<h1>HTML5 结构 元 素 解析 </h1> 
</hgroup> 

<p>HTML5 中 两 个 非常 重要 的 元 素 ， 
article 与 section</p> 


| 本 章 结束 语 | 


通过 对 本 章 学 习 ， 已 对 HTMLS5 主体 结构 元 素 和 非 主体 结构 元 素 有 了 一 定 的 了 解 ， 这 


[LajJLETGT 去 


口 artidesion @ 


GC OfileyVW/CVUsers/AdministratorDeskto.， 图 食 


HTML5 结 构 元 素 解析 
HTML5 中 两 个 非常 重要 的 元 素 ，article 与 section 
article 元 素 
article 元 素 一 般 用 于 文章 区 块 ， 定 义 外 观 的 内 容 
section 元 素 
section 元 素 主要 用 来 定义 文档 中 的 节 
区 别 
二 者 区 别 较 为 明显 ， 大 家 注意 两 个 元 素 的 应 用 范围 与 场景 


1 


<section> 

<h1>article 元 素 </h1> 

<p>article 元 素 一 般 用 于 文章 区 块 ， 定 义 
外 观 的 内 容 </p> 

</section> 

<section> 

<h1>section 元 素 </h1> 

<p>section 元 素 主要 用 来 定义 文档 中 的 节 
</p> 

</section> 

<section> 

<h1> 区 别 </h1> 

<p> 二 者 区 别 较 为 明显 ， 大 家 注意 两 个 元 
素 的 应 用 范围 与 场景 </p> 


</section> 


</article> 
</body> 
</html> 


些 元 素 明显 地 比 以 前 的 div 标签 更 具有 语义 化 。 熟 悉 这 些 标签 还 需要 不 断 地 去 使 用 。 
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CHARTER 02 
在 页 面 中 绘图 


SUMMARY 


HTML5 带 来 了 一 个 非常 令 人 期 待 的 新 元 素 一 canvas 元 素 。 这 个 
元 素 可 以 被 JavaScript 用 来 绘制 图 形 。 利 用 这 个 元 素 创 作 ， 可 
以 把 自己 喜欢 的 图 形 和 图 像 随心 所 欲 地 展现 在 web 页 面 上 。 本 章 
学 习 如 何 通过 canvasAP1 来 操作 canvas 元 素 。 


[三 

了 解 canvas 元 素 的 基本 概念 。 

掌握 如 何 使 用 canvas 绘制 一 个 简单 的 形状 。 

学 会 使 用 路 径 的 方法 ， 能 够 利用 路 径 绘制 多 边 形 。 
掌握 在 canvas 画布 中 绘制 图 像 的 方法 。 

学 会 在 画布 中 绘制 文字 ， 以 及 给 文字 添加 阴影 的 方法 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时 。 
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全 测 canvas a 


Canvas 元 素 允 许 脚本 在 浏览 器 页 面 当 中 动态 地 泻 染 点 阵 图 像 ， 新 的 HTMLS5 canvas 是 
一 个 原生 HTML 绘图 短 ， 用 于 JavaScript 代码 ， 不 使 用 第 三 方 工具 。 运 行 于 所 有 web 浏 
览 器 的 完整 HTML5 支持 还 没有 完成 ， 但 在 新 兴 的 支持 中 ，canvas 已 经 可 以 在 所 有 现代 浏 
览 器 上 良好 地 运行 ， 但 Windows@ Intemet Explorer@ 除外 。 幸 运 的 是 ， 一 个 解决 方案 已 经 
出 现 ， 将 Internet Explorer 也 包含 了 进来 。 


国 2.1.1 canvas 含义 


<canvas> 是 HTML5 新 增 的 元 素 ， 一 个 可 以 使 用 脚本 (通常 为 JavaScript) 在 其 中 绘制 
图 像 的 HTML 元 素 。 它 可 以 用 来 制作 照片 集 或 者 制作 简单 的 动画 ， 甚 至 可 以 进行 实时 视 
频 处 理 和 泻 染 。 
它 最 初 由 苹果 内 部 使 用 自己 的 MacOS X WebKit 推出 ， 供 应 用 程序 使 用 像 仪 表盘 
的 构件 和 Safari 浏览 器 使 用 。 后 来 ， 有 人 通过 Gecko 内 核 的 浏览 器 (尤其 是 Mozila 和 
Firefox)，Opera、Chrome 和 超 文 本 网 络 应 用 技术 工作 组 建议 在 下 一 代 的 网 络 技术 中 使 用 该 
元 素 。 

Canvas 是 由 HTML 代码 配合 高 度 和 宽度 属性 而 定义 出 的 可 绘制 区 域 。JavaScript 代码 
可 以 访问 该 区 域 ， 类似 于 其 他 通用 的 二 维 API， 通 过 一 套 完整 的 绘图 函数 来 动态 生成 图 形 。 
现在 已 经 没有 浏览 器 不 支持 canvas 标记 了 。 


转 2.1.2 canvas 坐标 


canvas 元 素 默认 被 网 格 所 覆盖 。 通 常 来 说 ， 网 格 中 的 一 个 单元 相当 于 canvas 元 素 中 
的 一 个 像素 。 栅 格 的 起 点 为 左上 角 (坐标 为 0,0〉 ) 。 所 有 元 素 的 位 置 都 相对 于 原点 来 
定位 。 所 以 图 中 中 间 方 块 左 上 角 的 坐标 为 距离 左边 (X 轴 ) x 像素， 距离 上 边 (Y 轴 ) y 
像素 (坐标 为 (x;y》 ) 。 如 图 2-1 所 示 。 

尽管 canvas 元 素 功 能 非常 强大 ， 

处 也 很 多 ， 但 在 某 些 情况 下 ， 如 果 
其 他 元 素 已 经 够 用 了 ， 就 不 用 再 使 
canvas 元 素 了 。 例 如 ， 用 canvas 元 素 
在 HIML 页 面 中 动态 绘制 所 有 不 同 的 
标题 ， 就 不 如 直接 使 用 标题 样式 标签 
(Hl、H2 等 ) ， 因 为 它们 所 实现 的 效 
果 是 一 样 的 。 


在 页 面 中 绘图 


使 用 canvas | 


本 节 将 深入 探讨 HIMLS canvas API。 使 用 各 种 HIMLS canvas API 创建 一 幅 类 似 于 
LOGO 的 图 像 ， 图 像 为 森林 场景 ， 有 树 ， 还 有 适合 长 跑 比赛 的 跑道 。 虽 然 这 个 示例 从 平面 
设计 的 角度 来 看 毫 无 竞争 力 ， 但 却 可 以 合理 演示 HTML5 canvas 的 各 种 功能 。 


国 2.2.1 在 页 面 中 加 入 canvas 


在 HIML 页 面 中 插入 canvas 元 素 非常 直观 。 下 面 就 是 一 段 可 以 被 插入 到 HTML 页 面 
中 的 canvas 代码 。 
语法 描述 : 


<canvas width="300" height="300"></canvas> 

以 上 代码 会 在 页 面 上 显示 出 一 块 300X300 像素 的 区 域 , 但 是 在 浏览 器 中 是 看 不 见 的 ， 
如 果 需 要 很 直观 地 在 浏览 器 中 预览 效果 的 话 ， 可 以 为 canvas 添加 一 些 CSS 样式 ， 例 如 添 
加 边框 和 背景 色 。 
小 试 身手 : canvas 在 页 面 中 的 用 法 


绘制 绿色 矩形 示例 代码 如 下 : 


<!DOCTYPE html> ! } 
<html lang="en"> ! </style> 
<head> | </head> 
<meta charset="UTF-8"> | <body> 
<title>canvas</title> | <canvas id="diagonal" width="300" 
<style> | height="300"></canvas> 
canvas{ | </body> 
border:2px solid red; | </html> 
background:green; ! 
[aJ[sIeEI 3 
[canvas x 
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绿色 背景 的 矩形 了 ， 这 个 矩形 就 是 接 
下 来 的 画布 。 在 没有 canvas 时 ， 想 在 
页 面 上 画 一 条 对 角 线 是 非常 困难 的 ， 
但 是 自从 有 了 canvas 之 后 ， 绘 制 对 角 
线 的 工作 就 非常 轻松 了 ， 只 需要 几 行 
代码 即 可 在 “画布 ”中 绘制 一 条 标准 
的 对 角 线 。 


小 试 身手 : 绘制 矩形 的 对 角 线 
绘制 对 角 线 示例 代码 如 下 : 


<script> 
Function drawDiagonal(){ 
// 取得 canvas 元 素 及 其 绘图 上 下 文 


Var canvas=document.getElementByld('diagonal'); 


Var context=canvas.getContext('2d'); 

// 用 绝对 坐标 来 创建 一 条 路 径 
context.beginPath(); 

context.moveTo(0,300); 

context.lineTo(300,0); 

// 将 这 条 线 绘制 到 canvas 上 

context.stroke(); 

} 
window.addEventListener("load",drawDiagonaltrue); 
</script> 


代码 的 运行 效果 如 图 2-3 所 示 。 


"| 
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仔细 看 一 下 上 面 这 段 绘制 对 角 线 的 JavaScript 代码 。 虽 然 简单 ， 却 展示 出 了 使 用 


HTML5 canvas API 的 重要 流程 。 

首先 通过 引 
就 是 diagonal。 接 着 定义 一 个 context 变量 ， 调 
希望 使 
前 为 止 唯一 可 


的 上 下 文 。 


特定 的 canvas ID 值 来 获取 对 canvas 对 象 的 访问 权 。 在 这 段 代码 中 ， 了 D 
canvas 对 象 的 getContext 方法 ， 并 传 入 
的 canvas 类 型 。 代 码 清单 中 通过 传 入 “2d” 来 获取 一 个 二 维 上 下 文 ， 这 也 是 到 


接 下 来 ， 基 于 这 个 上 下 文 执行 画 线 的 操作 。 在 代码 清 


中 ， 调 


于 三 个 方法 


beginPath、moveTo 和 lineTo， 传 入 了 这 条 线 的 起 点 和 终点 的 坐标 。 


moveTo 和 lineTo 实际 上 并 不 画 线 ， 而 是 在 结束 canvas 操作 时 ， 通 过 调 
用 context.stroke() 方法 完成 线条 的 绘制 。 虽 然 从 这 条 简单 的 线段 中 想象 不 到 


， 最 新 最 美的 国画 ， 不 过 与 以 前 的 拉 仿 图像、 怪异 的 CSS 和 DOM 对 象 以 及 


其 他 怪异 的 实现 形式 相 比 ， 使 用 基本 的 HIML 技术 在 任意 两 点 间 绘 制 一 条 


线段 已 经 是 非常 大 的 进步 了 。 


国 2.2.2 ”绘制 矩形 和 五 角形 


前 面 章节 介绍 了 canvas 的 工作 原理 , 下 面 就 来 在 页 


以 对 canvas 有 进一步 的 认识 。 


中 利 


canvas 绘 制 矩形 与 五 角形 ， 


在 页 面 中 绘图 


1. 绘制 矩形 


canvas 只 是 一 个 绘制 图 形 的 容器 ， 除 了 id、class、style 等 属性 外 ， 还 有 height 和 
width 属性 。 在 <canvas> 元 素 上 绘图 主要 有 三 步 。 
获取 <canvas> 元 素 对 应 的 DOM 对 象 ， 这 是 一 个 canvas 对 象 ; 
调 用 canvas 对 象 的 getcontext0 方 法 ， 得 到 一 个 CanvasRenderingContext2D 
对 象 ; 
调用 canvasRenderingcontext2D 对 象 进行 绘图 。 
绘制 矩形 rect0、flRectO 和 strokeRect0 函数 的 定义 内 容 如 下 : 
@ context.rect( x,y,width,height): 只 定义 矩形 的 路 径 。 
®@ contextfllRect(x,y, width , height ): 直接 绘制 出 填充 的 矩形 。 
@ context.strokeRect( x ,y, width , height )， 直 接 绘制 出 矩形 边框 。 


小 试 身手 : 同时 绘制 两 个 矩形 


<canvas id="demo" width="300" 
height="300"></canvas> 


JavaScript 代码 如 下 : 


context.stroke!(); 

// 使 用 fillRect 方 法 
context.fillStyle = "#1424DE"; 

| context.fillRect(210,10,190,190); 
<script> ! // 使 用 strokeRect 方法 

Var canvas=document. context.strokeStyle = "#F5270B"; 
BgetElementByld("demo"); context.strokeRect(410,10,190,190); 


Var context = canvas.getContext("2d"); L // 同时 使 用 strokeRect 方 法 和 人 Rect 方 
// 使 用 rect 方 法 | 法 
context.rect(10,10,190,190); | context.fillstyle = "#1424DE"”; 


context.lineWidth = 2; 
context.fillStyle = "#3EE4CB"; 


context.strokeStyle = "#F5270B"; 
context.strokeRect(610,10,190,190); 
context.strokeStyle = "#F5270B"; ! context.fillRect(610,10,190,190); 
context.fill(); | </script> 


代码 的 运行 效果 如 图 2-4 所 示 。 
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第 一 : stroke() 和 fill0 绘制 的 前 后 顺序 ， 如 果 用 fill0 在 后 面 绘制 ， 那 么 当 stroke 
边框 较 大 时 ， 会 明显 地 把 stroke() 绘制 出 的 边框 让 住 一 半 ; 第 二 : 
strokeStyle 属性 时 ， 可 以 通过 “rgba(255.0,0,0.2)” 的 方式 来 设置 ， 设置 的 最 后 一 个 参数 


设置 fillStyle 或 


代码 的 运行 效果 如 图 2-5 所 示 。 


六 canvas 拒 形 x 
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图 2-5 
2 绘制 五 角形 
小 试 身手 : 闪闪 红星 放 光 芒 


五 角 星 的 绘制 代码 如 下 : 
HTML 代码 如 下 : 


<canvas id="canvas" width="500" height="500"></ 
canvas> 


JavaScript 代码 如 下 : 


<script> 
var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 
// 设置 是 个 顶点 的 坐标 ， 根 据 项 点 制定 路 径 
for(vari=0;i<5;i++){ 
context.lineTo(Math.cos((18+i*72)/180*Math. 


与 矩形 绘制 有 关 的 ， 清除 和 矩 形 区 域 ，context.clearRect(x,y,width,height)。 接 收 参 数 分 
别 为 : 清除 矩形 的 起 始 位 置 以 及 矩形 的 帘 和 长 。 用 上 面 的 代码 绘制 图 形 时 ， 最 后 应 加 上 : 
contextclearRect(100.60.600.100)。 


Pl)*200+200, 
-Math.sin((18+i*72)/180*Math. 
Pl)*200+200); 
context.lineTo(Math.cos((54+i*72)/180*Math. 
Pl)*80+200, 
-Math.sin((54+i*72)/180*Math. 
PI)*80+200); 
} 
context.closePath(); 
// 设置 边框 样式 以 及 填充 颜色 
context.lineWidth="3"; 
context.fillStyle = "red"; 
context.strokeStyle = "green"; 
context.fill(); 
context.stroke(); 
</script> 


代码 的 运行 效果 如 图 2-6 所 示 。 
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在 页 面 中 绘图 


通过 上 面 两 个 案例 ， 相 信 大 家 已 经 对 如 何在 canvas 上 绘制 图 形 有 了 初步 的 认识 。 可 
以 总 结 如 下 。 
利用 flstyle 和 strokeStyle 属性 可 以 方便 地 设置 矩形 的 填充 和 线条 ， 颜 色 值 使 用 和 
CSS 一 样 ， 包 括 十 六 进 制 数 一 rgb 站、rgba0 和 hsla。 
@ 使 用 fllRect 可 以 绘制 带 填充 的 矩形 。 
@ 使 用 strokeRect 可 以 绘制 只 有 边框 没有 填充 的 矩形。 
@ 如 果 想 清除 部 分 canvas， 可 以 使 用 clearRect。 
以 上 几 个 方法 的 参数 都 是 相同 的 ， 包 括 x、y 和 width、height。 


国 2.2.3 检测 浏览 器 是 否 支 持 


在 创建 HTML5 canvas 元 素 之 前 ， 首 先 要 确保 浏览 器 能 够 支持 它 。 如 果 不 支持 ， 就 要 
提供 一 些 蔡 代 文字 。 以 下 代码 就 是 检测 浏览 器 支持 情况 的 一 种 方法 。 


小 试 身手 : 浏览 器 的 支持 情况 检测 
(1) HTML 代码 : 


<canvas id="test-canvas" width="200" heigth="100"> 
<p> 你 的 浏览 器 不 支持 Canvas</p> 


</canvas> 


(2) JavaScript 代码 如 下 : 
<script> 


var canvas = document.getElementByld('test-canvas’); 
if (canvas.getContext) { 


alert( 你 的 浏览 器 支持 Canvas!"); 
}else{ 


alert(' 你 的 浏览 器 不 支持 Canvas!"); 
} 
</script> 
代码 的 运行 效果 如 图 2-7 所 示 。 
上 面 的 代码 试图 创建 一 个 canvas 对 象 ， 并 且 获 取 其 上 下 文 。 如 果 发 生 错 误 ， 则 可 以 
捕获 错误 ， 进 而 得 知 该 浏览 器 不 支持 canvas。 在 页 面 中 预先 放 入 了 ID 为 support 的 元 素 ， 
通过 适当 的 信息 更 新 该 元 素 的 内 容 ， 可 以 反映 出 浏览 器 的 支持 情况 。 
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| 2.3 ”绘制 曲线 路 径 | 


canvas 提供 了 绘制 矩形 的 API， 但 对 于 曲线 ， 并 没有 提供 直接 可 以 调用 的 方法 。 因 此 ， 
需要 利用 canvas 的 路 径 来 绘制 曲线 。 使 用 路 径 ， 可 以 绘制 线条 、 连 续 的 曲线 及 复合 图 形 。 


本 章 将 学 习 利用 canvas 的 路 径 绘制 曲线 的 方法 。 


国 2.3.1 绘制 路 径 的 方法 


关于 绘制 线条 ， 还 能 提供 很 多 有 创意 的 方法 。 现 在 进一步 学 习 稍 复杂 点 的 图 形 一 路 
径 。 HTMLS5 canvasAPI 中 的 路 径 代表 希望 呈现 的 任何 形状 。 本 章 对 角 线 示例 就 是 一 条 路 径 ， 
在 代码 中 调用 beginPath， 就 说 明 是 要 开始 绘制 路 径 了 。 实 际 上 ， 路 径 可 以 任意 复杂 : 多 


条 线 、 曲 线段 ， 甚 至 是 子路 径 。 


第 一 个 需要 调用 的 就 是 beginPath。 这 个 简单 的 函数 不 带 任何 参数 ， 它 用 来 通知 


canvas 将 始 绘制 一 个 新 的 图 形 了 。 对 于 canvas 来 说 ，beginPath 函数 最 大 的 用 处 是 
canvas 需要 据 此 来 计算 图 形 的 内 部 和 外 部 范围 ， 以 便 完成 后 续 的 描 边 和 填充 。 
路 径 会 跟踪 当前 坐标 ， 默 认 值 是 原点 。canvas 本 身 也 跟踪 当前 坐标 ， 不 过 可 以 通过 绘 


制 代码 来 修改 。 


调用 了 beginPath 之 后 ， 就 可 以 使 用 context 的 各 种 方法 来 绘制 想 要 的 形状 了 。 到 目前 


为 止 ， 已 经 用 到 了 几 个 简单 的 context 路 径 函 数 。 


moveTo(x, y); 不 绘制 ， 只 是 将 当前 位 置 移动 到 新 的 目标 坐标 (x,y) 上 。 
lineTo(x, y): 不 仅 将 当前 位 置 移动 到 新 的 目标 坐标 (x,y)， 而 且 在 两 个 坐标 之 间 画 一 条 


直线 。 


上 面 两 个 函数 的 区 别 在 于 ; moveTo 就 像 是 提起 画笔 ， 移 动 到 新 位 置 ， 而 lineTo 告诉 


canvas 用 画笔 在 纸 上 的 旧 坐标 上 画 条 直线 到 新 坐标 不 过 , 再 次 提醒 一 下 , 不 管 调用 哪 一 个 ， 


都 不 会 真正 画 出 图 形 , 因为 还 没有 调用 stroke 或 者 fl 函数 。 目 前， 只 是 在 定义 路 径 的 位 置 ， 


以 便 在 后 面 绘制 时 使 用 。 


小 试 身手 : 使 用 路 径 和 闭合 路 径 
路 径 的 绘制 代码 如 下 ， 


<!DOCTYPE html> 


<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>canvas 路 径 </title> 
</head> 

<body> 


<canvas id="demo" width="300" 


height="300"></canvas> 
</body> 
<script> 


function createCanopyPath(context) { 


// 绘制 树冠 
context.beginPath(); 
context.moveTo(-25, -50); 
context.lineTo(-10, -80); 
context.lineTo(-20, -80); 
context.lineTo(-5, -110); 
context.lineTo(-15, -110); 
// 树 的 项 点 
context.lineTo(0, -140); 
context.lineTo(15, -110); 
context.lineTo(5, -110); 
context.lineTo(20, -80); 
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在 页 面 中 绘图 


context.lineTo(10, -80); 1 context.translate(130, 250); 


context.lineTo(25, -50); ! // 创建 表现 树冠 的 路 径 

// 连接 起 点 ， 闭 合 路 径 createCanopyPath(context); 

context.closePath(); | // 绘制 当前 路 径 

} | context.stroke(); 

drawTrails(); ! context.restore(); 

function drawTrails() { | } 

var canvas = document.getElementByld('demo’); | </script> 

Var context = canvas.getContext('2d'); ! </html> 

context.save(); ! 

代码 的 运行 效果 如 图 2-8 所 示 。 

从 上 面 的 代码 中 可 以 看 到 ， 在 > ~ [asIsl 
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JavaScript 中 第 一 个 函数 用 到 的 仍然 是 前 面 
用 过 的 移动 和 画 线 命令 ， 只 不 过 调用 次 数 
多 了 一 些 。 这 些 线条 表现 的 是 树冠 的 轮廓 ， 
最 后 闭合 了 路 径 。 

第 二 个 函数 在 这 段 代 码 中 的 所 有 调用 
想必 大 家 已 经 很 熟悉 了 。 先 获取 canvas 的 上 
下 文 对象 ， 进 行 保存 ， 以 便 后 续 使 用 ， 将 
当前 位 置 变换 到 新 位 置 ， 画 树冠 ， 绘 制 到 
canvas 上 ， 最 后 恢复 到 上 下 文 的 初始 状态 。 
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国 2.3.2 ” 描 边 样式 的 使 用 


如 果 只 能 绘制 直线 , 而 且 只 能 使 用 黑色 , HTMLS5 canvas API 就 不 会 如 此 强大 和 流行 。 
下 面 使 用 描 边 样式 让 树冠 看 起 来 更 像 是 树 。 下 面 代码 展示 了 一 些 基本 命令 ， 其 功能 是 通过 
修改 context 的 属性 ， 让 绘制 的 图 形 更 生动 。 
小 试 身手 : 为 上 个 示例 的 路 径 描 边 


描 边 样 式 的 示例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>canvas 描 边 </title> 
</head> 

<body> 


<canvas id="demo" width="300" 


height="300"></canvas> 
</body> 
<script> 


function createCanopyPath(context) { 


// 绘制 树冠 
context.beginPath(); 
context.moveTo(-25, -50); 
context.lineTo(-10, -80); 
context.lineTo(-20, -80); 
context.lineTo(-5, -110); 
context.lineTo(-15, -110); 
// 树 的 项 点 
context.lineTo(0, -140); 
context.lineTo(15, -110); 
context.lineTo(5, -110); 
context.lineTo(20, -80); 


context.lineTo(10, -80); 
context.lineTo(25, -50); 
// 连接 起 点 ， 闭 合 路 径 
context.closePath(); 

} 

drawTrails(); 

function drawTrails() { 


var canvas = document.getElementByld 


(demo); 

var context = canvas.getContext('2d"); 
context.savel(); 

context.translate(130, 250); 

// 创建 表现 树冠 的 路 径 
createCanopyPath(context); 


代码 的 运行 效果 如 图 2-9 所 示 。 


// 绘制 当前 路 径 
context.stroke(); 
context.restore(); 

// 加 宽 线 条 
context.lineWidth = 4; 

// 平滑 路 径 的 接合 点 
context.lineJoin = 'round'; 
// 将 颜色 改 成 棕色 
context.strokeStyle = '#663300'; 
// 最 后 ， 绘 制 树 完 
context.stroke(); 

} 

</script> 

</html> 
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图 2-9 


设置 上 面 的 这 些 属 性 可 以 改变 以 
context 恢复 到 上 一 个 状态 。 

绘制 描 边 样式 的 步骤 如 下 。 

@ 将 线条 宽度 加 粗 到 3 像素 。 


& JE 可 | 又 


后 将 要 绘制 的 图 形 外 观 ， 这 个 外 观 可 以 保持 到 将 


@ 将 lineJoin 属性 设置 为 round， 这 是 修改 当前 形状 中 线段 的 连接 方式 ， 以 让 拐角 变 
得 更 圆滑 也 可 以 把 lineJoin 属性 设置 成 bevel 或 者 miter (相应 的 context.miterLimit 值 也 


需要 调整 ) ， 以 此 来 变换 拐角 样式 。 


在 后 面 几 节 中 ， 还 将 看 到 strokeStyle 的 值 可 以 


图 2.3.3 填充 和 曲线 的 绘制 方法 


@ 通过 strokeStyle 属性 改变 了 线条 的 颜色 。 在 这 个 例子 中 , 使 用 了 CSS 值 来 设置 颜色 。 


生成 特殊 效果 的 图 案 或 者 渐变 色 。 


在 实际 中 ， 不 只 有 直线 和 和 矩形。canvas 提供 了 一 系列 绘制 曲线 的 函数 和 填充 的 样式 。 


接 下 来 用 最 简单 的 曲线 函数 二 次 曲线 来 绘制 林 荫 小 路 和 为 树冠 填充 颜色 。 以 下 代码 演示 了 


如 何 添加 两 条 二 次 曲线 和 填充 颜色 。 
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在 页 面 中 绘图 


小 试 身手 : 填充 颜色 和 曲线 的 绘制 


颜色 填充 和 曲线 的 绘制 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>canvas 绘制 曲线 </title> 
</head> 

<body> 

<canvas id="demo" width="300" 
height="300"></canvas> 
</body> 

<script> 

function createCanopyPath(context) { 
// 绘制 树冠 
context.beginPath(); 
context.moveTo(-25, -50); 
context.lineTo(-10, -80); 
context.lineTo(-20, -80); 
context.lineTo(-5, -110); 
context.lineTo(-15, -110); 

// 树 的 项 点 

context.lineTo(0, -140); 
context.lineTo(15, -110); 
context.lineTo(5, -110); 
context.lineTo(20, -80); 
context.lineTo(10, -80); 
context.lineTo(25, -50); 

// 连接 起 点 ， 闭 合 路 径 
context.closePath(); 

} 

drawTrails(); 

function drawTrails() { 

var canvas = document.getElementByld 
(demo); 

var context = canvas.getContext('2d'); 
context.save(); 
context.translate(130, 250); 

// 创建 表现 树冠 的 路 径 
createCanopyPath(context); 

// 绘制 当前 路 径 
context.stroke(); 
context.restore(); 


六 canvas 绽 制 提 线 x 也 


// 将 填充 色 设置 为 绿色 并 填充 树冠 
context.fillStyle='#339900"'; 
context.fill(); 

// 保存 canvas 的 状态 并 绘制 路 径 
context.savel() 
context.translate(-10, 350); 
context.beginPath(); 

// 第 一 条 曲线 向 右上 方 弯 
context.moveTo(0, 0); 
context.quadraticCurveTo(170, -50, 260, 
-190); 

// 第 二 条 曲线 向 右 下 方 弯 
context.quadraticCurveTo(310, -250, 410,- 
250); 

// 使 用 棕色 的 粗 线条 来 绘制 路 径 
context.strokeStyle = '#663300'; 
context.lineWidth = 20; 

context.stroke(); 

// 恢复 之 前 的 canvas 状态 
context.restore(); 

| 

</script> 

</html> 


代码 的 运行 效果 如 图 2-10 所 示 。 
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此 加 进 


quadraticCurveTo 函数 绘制 曲线 的 起 点 是 当前 坐标 ， 带 有 两 组 (xy) 参数 。 第 二 组 是 

线 的 终点 。 第 一 组 代表 控制 点 (control point) 。 所 谓 的 控制 点 位 于 曲线 的 旁边 〈 不 

线 之 上 ) ， 其 作用 相当 于 对 曲线 产生 一 个 拉力 。 通 过 调整 控制 点 的 位 置 ， 即 可 改变 

网 曲率 。 在 右上 方 再 画 一 条 一 样 的 曲线 ， 以 形成 一 条 路 径 。 然 后 ， 像 之 前 描 边 树冠 一 样 
把 这 条 路 径 绘制 到 canvas 上 。 


将 fillStyle 属性 设置 成 合适 的 颜色 。 然 后 ， 只 要 调用 context 的 蚀 ] 函数 
! 即 可 让 canvas 对 当前 图 形 中 所 有 闭合 路 径 内 部 的 像素 点 进行 填充 。 


| 2.4 绘制 图 像 | 


本 节 将 使 用 canvas API 的 基本 功能 来 插入 图 像 并 绘制 背景 图 像 。 通 过 实例 来 熟悉 应 用 


canvas 的 变换 ， 从 而 对 canvas API 有 一 个 更 深刻 


国 2.4.1 


改 


的 认识 。 


使 用 canvas 插入 图 片 


在 canvas 中 显示 图 片 非常 简单 。 可 以 通过 修 1 


图 


片 等 ， 并 且 图 片 通常 会 成 为 canvas 上 的 焦点 。 


命令 可 以 轻松 地 为 canvas 添加 图 片 内 容 。 


E 层 为 图 片 添加 印章 、 拉 伸 图 片 或 者 修 


HTML5 canvas API 内 置 的 几 个 简单 


小 试 身手 : 如 何 利用 canvas 在 页 面 中 插入 图 片 


在 页 面 中 插入 图 片 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

canvas{ 

border:1px red solid; 

} 

</style> 

</head> 

<body> 

<canvas id="cv" width="500" 
height="500"></canvas> 

</body> 


<script type="text/javascript"> 
function drawBeauty(beauty){ 

var mycv = document.getElementByld 
(eo); 

var myctx = mycv.getContext("2d"); 
myctx.drawlmage(beauty, 0, 0); 
function load(){ 

var beauty = new Imagel); 
beauty.src = "fengjing.jpg"; 
if(beauty.complete){ 
drawBeauty(beauty); 

Jelse{ 

beauty.onload = function(){ 
drawBeauty(beauty); 
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在 页 面 中 绘图 


上 

beauty.onerror = function(}{ 
window.alert(' 风景 加 载 失 败 ， 请 重 试 ); 
上 

//load 

if (document.all) { 
window.attachEvent('onload', load); 
jelse{ 

window.addEventListener('load', load, false); 
} 

</script> 

</html> 


代码 的 运行 效果 如 图 2-11 所 示 。 


图 片 增加 了 canvas 操作 的 复杂 度 : 必须 等 到 图 片 完 


[ENEIEL EJ 
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进行 操作 。 浏 览 器 通常 会 在 页 面 脚 本 执行 的 同时 异步 加 载 图 片 。 如 果 试 图 


何 图 片 。 因 此 ， 开 发 人 员 要 特别 注意 ， 在 呈现 图 片 之 前 ， 应 确保 其 已 经 加 


| 在 图 片 未 完全 加 载 之 前 就 将 其 呈现 到 canvas 上 ， 那 么 canvas 将 不 会 显示 任 


国 2.4.2 渐变 颜色 的 使 用 


全 加 载 后 才能 对 其 


渐变 是 指 两 种 或 两 种 以 上 的 颜色 之 间 的 平滑 过 渡 。 对 于 canvas 来 说 ， 渐 变 也 是 可 以 
实现 的 。 在 canvas 中 可 以 实现 两 种 渐变 效果 : 线性 渐变 和 扇形 渐变 。 


小 试 身手 : 使 用 canvas 实现 线性 渐变 


线性 渐变 的 示例 代码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<head> 

<title> 线性 渐变 </title> 

<meta charset="utf-8"/> 

</head> 

<body> 

<canvas width="500px" height="500px" 
id="canvas"></canvas> 

</body> 

<script> 

var canvas=document.getElementByld 


("canvas"); 


Var context=canvas.getContext("2d"); 

var grad=context.createLinearGradie 
nt(0,0,400,0); 

//var grad=context.createLinearGradie 
nt(0,0,0,300); 

//var grad=context.createLinearGradie 
nt(0,0,400,300); 
grad.addColorStop(0,"blue"); 
grad.addColorStop(0.5,"green"); 
grad.addColorStop(1,"yellow"); 
context.fillStyle=grad; 
context.fillRect(0,0,400,300); 

</script> 

</html> 


代码 的 运行 效果 如 图 2-12 所 示 。 
下 面 来 解释 上 段 关 键 代码 的 意义 。 


varlingrad = context.createLinearGradient(0,0,0,150); 


这 是 创建 的 一 个 像素 为 400， 由 左 到 右 的 线性 


grad.addColorStop(0,"blue"); 
grad.addColorStop(0.5,"green"); 
grad.addColorStop(1,"yellow"); 


一 个 渐变 可 以 有 两 种 或 更 多 种 的 色彩 变化 。 沿 
着 渐变 方向 ， 颜 色 可 以 在 任何 地 方 变化 。 要 增加 一 
种 颜色 变化 ， 需 要 指定 它 在 渐变 中 的 位 置 。 渐 变 位 
置 可 以 在 0 和 1 之 间 任 意 取 值 。 


context.fillstyle=grad; 
context.fillRect(0,0,400,300); 
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如 果 想 让 颜色 产生 渐变 的 效果 ， 就 需要 为 这 个 渐变 对 象 设置 图 形 的 fllStyle 属性 ， 并 绘制 这 个 图 


着 来 绘制 扇形 渐变 。 


小 试 身手 : 扇形 渐变 的 绘制 方法 
扇形 渐变 示例 代码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<head> 

<title> 扇形 渐变 </title> 

<meta charset="utf-8"/> 

</head> 

<body> 

<canvas id="canvas" width="400px" 
height="300px"></canvas> 

</body> 

<script> 

var canvas=document.getElementByld("canvas"); 

var context=canvas.getContext("2d"); 

var grad=context.createRadialGradie 
nt(200,0,100,200,300,100); 

//var grad=context.createRadialGradie 
nt(0,0,30,200,300,100); 
grad.addColorStop(0,"orange"); 
grad.addColorStop(1,"yellow"); 


图 2-12 


context.fillStyle=grad; 
context.fillRect(0,0,400,300); 
</script> 

</html> 


代码 的 


运行 效果 如 图 2-13 所 示 。 


| 
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图 2-13 


在 页 面 中 绘图 


上 述 代码 context.createRadialGradient(200,0.100,200,300.100)， 所 表示 的 含义 如 下 。 
200 为 渐变 开始 的 圆心 横 坐 标 ，0 为 渐变 开始 圆 的 圆心 纵 坐标 ，100 为 开始 圆 的 半径 ， 
200 为 渐变 结束 圆 的 圆心 横 坐 标 ，300 为 渐变 结束 圆 的 圆心 纵 坐标 ，100 为 结束 圆 的 半径 。 


国 2.4.3 变形 图 形 的 设置 方法 
绘制 图 形 时 ， 会 经 常 对 绘制 的 图 形 进行 变化 ， 例 如 旋转 ， 使 用 canvas 的 坐标 轴 变 换 
处 理 功能 ， 可 以 实现 这 样 的 效果 。 
对 坐标 使 用 变换 处 理 ， 即 可 实现 图 形 的 变形 处 理 。 对 坐标 的 变换 处 理 有 以 下 3 种 
方式 。 


(1) 平移 
移动 图 形 的 绘制 主要 是 通过 translate 方法 来 实现 。 定 义 的 方法 如 下 : 


Context. Translate(x,y); 


Translate 方法 使 用 两 个 参数 : x 表示 将 坐标 轴 原 点 向 左 移动 若干 个 单位 ， 默 认 情况 下 
为 像素 ; y 表示 将 坐标 轴 原 点 向 下 移动 若干 个 单位 。 

(2) 缩放 

使 用 图 形 上 下 文 对 象 的 scale 方法 将 图 像 进行 缩放 。 定 义 的 方法 如 下 : 


Context.scale(x,y); 

scale 方法 使 用 两 个 参数 ，x 是 水 平方 向 的 放大 倍数 ，y 是 垂直 方向 的 放大 倍数 。 缩 小 
图 形 时 ， 将 这 两 个 参数 设置 为 0~1 的 小 数 即 可 ， 例 如 0.1 是 指 将 图 形 缩小 十 分 之 一 。 

(3) 旋转 

使 用 图 形 上 下 文 对 象 的 rotate 方法 将 图 形 进行 旋转 。 定 义 的 方法 如 下 ; 


Context.rotate(angle); 


Rotate 方 法 接受 一 个 参数 angle, angle 是 指 旋转 的 角度 , 旋转 的 中 心 点 是 坐标 轴 的 原点 。 
旋转 是 以 顺 时 针 方向 进行 的 ， 想 要 逆 时 针 旋转 ， 将 angle 设 定 为 负数 即 可 。 


小 试 身手 : 让 图 片 旋转 起 来 


旋转 图 像 的 示例 代码 如 下 : 

<!DOCTYPE html> ! context.fillstyle ="#fff"; // 设置 背景 色 为 白 
<head> | 色 

<meta charset="UTF-8"> | context.fillRect(0, 0, 400, 300); // 创建 一 个 
<title> 绘制 变形 的 图 形 </title> | 画布 

<script> ， /图 形 绘制 

function draw(id) | context.translate(200,50); 

村 | context.fillStyle = 'rgba(255,0,0,0.25)'; 

var canvas = document.getElementByld(id); | for(var i = 0;i< 50;i++) 

if (canvas == null) | { 

return false; : context.translate(25,25); // 图 形 向 左 ， 向 


var context = canvas.getContext('2d'); 1 下 各 移动 25 


context.scale(0.95,0.95); // 图 形 缩放 
context.rotate(Math.PI/ 10); // 图 形 旋转 
context.fillRect(0,0,100,50); 

} 

} 

</script> 

</head> 

<body onload="draw('canvas');"> 

<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


代码 的 运行 效果 如 图 2-14 所 示 。 


从 上 述 代 码 可 以 看 出 绘制 了 一 个 矩形 ， 在 循环 


国 2.4.4 组 合 图 形 的 绘制 方法 

使 用 canvas API 可 以 将 一 个 图 形 重 亚 绘制 在 另 一 个 图 
看 到 的 部 分 完全 取决 于 以 哪 种 方式 进行 组 合 ， 这 时 需 
技术 。 
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平移 坐标 轴 、 图 形 缩放 、 图 形 旋 转 这 3 种 技巧 ， 
最 后 绘制 出 了 变形 图 形 。 
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形 上 面 ， 但 是 图 形 中 能 够 被 


到 canvas API 的 图 形 组 合 


在 HTML5 中 ， 只 要 用 图 形 上 下 文 对 象 的 global Composite Operation 属性 就 能 自行 决 


定 图 形 的 组 合 方式 ， 使 用 方法 如 下 : 


Context. globalCompositeOperation=type 


Type 值 必须 是 下 面 的 字符 串 之 一 : 


@ Source-over: 这 是 默认 值 ， 表 示 图 形 会 覆盖 在 原 图 形 之 上 。 

e@ Destination-over: 表示 会 在 原 有 图 形 之 下 绘制 新 图 形 。 

@ Source-in 新 图 形 只 出 现 与 原 有 图 形 重 又 的 部 分 , 其 他 区 域 都 变 成 透明 的 。 
@ Destination-in: 原 有 图 形 中 与 新 图 形 重 又 的 部 分 会 被 保留 ， 其 他 区 域 都 


变 成 透明 的 。 


e Source-out: 只 有 新 图 形 中 与 原 有 内 容 不 重 芭 的 部 分 会 被 绘制 出 来 。 


Destination-out: 原 有 图 形 中 与 图 形 不 重 芭 的 部 分 会 被 保留 。 


@ Source-atop: 只 绘制 新 图 形 中 与 原 有 图 形 重 又 的 部 分 和 未 被 重 到 覆盖 的 


原 有 图 形 ， 新 图 形 的 其 他 部 分 变 成 透明 。 
@ Destination-atop: 只 绘制 原 有 图 形 中 被 新 图 


图 形 相 重 于 的 部 分 。 


Xor: 重生 部 分 会 变 成 透明 色 。 


Lighter: 两 图 形 重 芭 部 分 做 加 色 处 理 。 
Darker: 两 图 形 重 到 部 分 做 减 色 处 理 。 


Copy: 只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 掉 。 


形 重 双 覆盖 的 部 分 与 新 图 形 


的 其 他 部 分 ， 原 有 图 形 中 的 其 他 部 分 变 成 透明 ， 不 绘制 新 图 形 中 与 原 有 


在 页 面 中 绘图 


Var context = canvas.getContext('2d'); 
// 定义 数组 


vararr = new Array( 


小 试 身手 : 两 个 图 像 的 重 赤 显示 
三 荆 图 像 的 示例 代码 如 下 : 
<!DOCTYPE html> // 设置 组 合 方式 
<head> context.globalCompositeOperation = arr[i]; 
<meta charset="UTF-8"> // 设置 新 图 形 
<title> 组 合 多 个 图 形 </title> context.beginPath(); 
<script > context.fillStyle = "#FFO099"; 
function draw(id) context.arc(150,150,100,0,Math.Pl*2,false); 
{ context.fill(); 
Var canvas = document.getElementByld(id); } 
if (canvas == null) </script> 
return false; </head> 


<body onload="draw('canvas');"> 
<canvas id="canvas" width="400" 
height="300" /> 


"source-Over", </body> 
"source-in", </ht/ml> 
"source-out", CE 
a 4 代码 的 运行 效果 如 图 2-15 所 示 。 
~ 了 
ndecti a [ellol®l |] 
‘destination-over", VD sam x 


"destination-in", 
"destination-out", 
"destination-atop", 
"lighter", 

"darker”, 


"xor", 


i=8; 

// 绘制 原 有 图 形 
context.fillStyle = "#9900FF"; 
context.fillRect(10,10,200,200); 


2.4.5 ”使 用 canvas 绘制 文字 


文字 绘制 由 以 下 两 个 方法 组 成 : 


fillText(text,x,y,maxwidth); 
trokeText(text,x,y,maxwidth); 
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两 个 函数 的 参数 完全 相同 ， 必 选 参数 包括 文本 参数 以 及 用 于 指定 文本 位 置 的 坐标 参 
数 。maxwidth 是 可 选 参数 ， 用 于 限制 字体 大 小 ， 它 会 将 文本 字体 强制 收缩 到 指定 尺寸。 
此 外 ， 还 有 一 个 measureText 函数 可 供 使 用 ， 该 函数 会 返回 一 个 度量 对 象 ， 其 中 包含 了 在 


当前 context 环境 下 指定 文本 的 实际 显示 宽度 。 


的 属 


前 值 


为 了 保证 文本 在 各 浏览 器 下 都 能 正常 显示 ，canvas API 为 context 提供 了 类 似 于 CSS 
性 ， 以 此 来 保证 实际 显示 效果 的 高 度 可 配置 性 。 
使 用 canvas API 进行 文字 绘制 主要 有 如 下 几 个 属性 。 
e@ Font: CSS 字体 字符 串 ， 用 来 设置 字体 。 
@ textAlin: 设置 文字 水 平 对 齐 方式 ， 属 性 值 可 以 为 start、end、left、 
right、center。 
e@ textBaeline: 设置 文字 垂直 对 齐 方 式 ， 属 性 值 可 以 为 top、hanging、 
middle、alphabetic、ideographic、bottom。 
对 上 面 这 些 context 属性 赋值 能 够 改变 context， 而 访问 context 属性 可 以 查询 到 其 当 
。 在 下 列 代码 中 ， 首 先 创建 了 一 段 使 用 Impact 字体 的 大 字号 文本 ， 然 后 使 用 已 有 的 


树 皮 


图 片 作为 背景 进行 填充 。 为 了 将 文本 置 于 canvas 的 上 方 并 居中 ， 定 义 了 最 大 宽度 和 


center〈 居 中 ) 对 齐 方式 。 


小 试 身手 : 绘制 一 段 文字 


文字 的 绘制 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title>Canvas 绘制 文本 文字 </title> 

</head> 

<body> 

<!- 添加 canvas 标签 ， 并 加 上 红色 边框 以 便于 在 页 面 上 查看 -> 

<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"> 


您 的 浏览 器 不 支持 canvas 标签 。 


</canvas> 

<script type="text/javascript"> 

// 获取 Canvas 对 象 ( 画布 ) 

var canvas = document.getElementByld("myCanvas"); 

// 简单 地 检测 当前 浏览 器 是 否 支 持 Canvas 对 象 ， 以 免 在 一 些 不 支持 html5 的 浏览 器 中 提示 语 
法 错误 

if(canvas.getContext){ 

// 获取 对 应 的 CanvasRenderingContext2D 对 象 ( 画笔 ) 
Var ctx = canvas.getContext("2d"); 

// 设置 字体 样式 

ctx.font = "30px Courier New"; 

// 设置 字体 填充 颜色 

ctx.fillStyle = "blue"; 

// 从 坐标 点 (50,50) 开始 绘制 文字 

ctx.fillText(" 绘制 文字 ", 50, 50); 

lL 


</script> 
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在 页 面 中 绘图 


</body> 
</html> 


代码 的 运行 效果 如 图 2-16 所 示 。 


BJs 全 


GC © file///C/Users/Administrator/Desktop/... 人 女 


绘制 文字 


L2.5 课堂 练习 | 


课堂 练习 给 大 家 准备 了 一 个 时 钟 的 绘制 方法 ， 应 用 代码 时 的 情况 如 图 2-17 所 示 。 
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<head> 
<meta charset="UTF-8"> 
<title> 时 钟 </title> 
<style> 
body{ 
padding: 0; 
margin: 0; 
background-color: rgba(0, 0, 0, 0.1) 
} 


canvas { 


om  " 
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display: block; 
margin: 200px auto; 
</style> 
</head> 
<body> 
<canvas id="solar" width="300" 
height="300"></canvas> 
<script> 
init(); 


2 


2-17 显示 效果 的 代码 如 下 : 


<!DOCTYPE html> 


<html lang="en"> 


function init(){ 
let canvas = document. 
querySelector("#solar"); 

let ctx = canvas.getContext("2d"); 
draw(ctx); 

} 

function draw(ctx){ 
requestAnimationFrame(function step() 


drawDial(ctx); // 绘制 表盘 
drawAllHands(ctx); // 绘制 时 分 秒针 
requestAnimationFrame!(step); 
六 
} 
绘制 时 分 秒针 */ 
function drawAllHands(ctx){ 
let time = new Datel(); 
let s = time.getSeconds(); 
let m = time.getMinutes(); 
let h = time.getHours(); 
let pi = Math.Pl; 
let secondAngle =pi/180*6*s; // 计 
算出 来 s 针 的 弧度 
let minuteAngle = pi/ 180* 6* m+ 
secondAngle / 60; // 计算 出 来 分 针 的 弧度 
let hourAngle = pi/ 180* 30* h+ 
minuteAngle / 12; // 计算 出 来 时 针 的 弧度 
drawHand(hourAngle, 60, 6, "#FF0099", 
ctx); // 绘制 时 针 
drawHand(minuteAngle, 106, 4, 
"orange", ctx); // 绘制 分 针 
drawHand(secondAngle, 129, 2, 
"green", ctx); // 绘制 秒针 
} 
作 绘 制 时 针 、 或 分 针 、 或 秒针 
“参数 1， 要 绘制 的 针 的 角度 
* 参数 2: 要 绘制 的 针 的 长 度 
* 参数 3: 要 绘制 的 针 的 宽度 
“参数 4， 要 绘制 的 针 的 颜色 
* 参数 5;， ctx 
+ 4/ 


function drawHand(angle, len, width, 


color, ctxjf 
ctx.save(); 
ctx.translate(150, 150); // 把 坐标 轴 的 


远 点 平移 到 原来 的 中 心 
ctx.rotate(-Math.Pl / 2 + angle); // 旋 
转 坐 标 轴 。 x 轴 就 是 针 的 角度 
ctx.beginPath(); 
ctx.moveTo(-4, 0); 
ctx.lineTollen, 0); // 沿 着 x 轴 绘 制 针 
ctx.lineWidth = width; 
ctx.strokeStyle = color; 
ctx.lineCap = "round"; 
ctx.stroke(); 
ctx.closePath(); 
ctx.restore(); 
} 
/* 绘制 表盘 */ 
function drawDial(ctx){ 
let pi = Math.Pl; 
ctx.clearRect(0, 0, 300, 300); // 清除 所 
有 内 容 
ctx.save(); 
ctx.translate(150, 150); // 一 定 坐 标 原 
点 到 原来 的 中 心 
ctx.beginPath(); 
ctx.arc(0, 0, 148, 0, 2 * pi); // 绘制 圆周 
ctx.stroke(); 
ctx.closePath(); 
for (leti= 0; i< 60; it+){// 绘制 刻度 
ctx.save(); 
ctx.rotate(-pi / 2+i* pi/ 30); // 旋 
转 坐 标 轴 。 坐 标 轴 x 的 正方 形 从 向 上 开 
始 算 起 
ctx.beginPath(); 
ctx.moveTo(110, 0); 
ctx.lineTo(140, 0); 
ctx.lineWidth =i%5?2:4; 
ctx.strokeStyle = i % 5 ? "blue”" : 


"red"; 
ctx.stroke(); 
ctx.closePath(); 
ctx.restore(); 
} 
ctx.restore(); 
} 
</script> 
</body> 
</html> 
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在 页 面 中 绘图 


强化 训练 


学 习 完 本 章 后 ， 大 家 对 canvas 的 应 用 有 了 一 定 的 了 解 ， 现 在 来 做 一 个 练习 ， 一 个 经 
典 的 游戏 一 贪 吃 蛇 。 
如 图 2-18 所 示 是 制作 完成 的 效果 。 
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得 分 : 210 


图 2-18 


操作 提示 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 制作 贪 吃 蛇 </title> 
<style type="text/css"> 
body{ 
margin:0 auto; 
background:#green; 
width:960px; 
height:800px; 
中 
nav{ 
width:960px; 
height:50px; 
float:left; 
} 


canvas{ 
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border: thick solid #000000; 
width:500px; 
height:500px; 
float:left; 
J 
#score{ 
width:100px; 
height:500px; 
font-size:18px; 
font-weight:green; 
float:left; 
} 
#score span{ 
color:#fffff; 
} 
</style> 
</head> 
<body> 
<nav> 
贪 吃 蛇 〈 按 键 WSAD: 分 别 是 上 下 左右 ) 
</nav> 
<canvas id="canvas" width="500" height="500"> 


</canvas> 


<div id="score"> 
得 分 : <span>0</span> 
</div> 
</body> 
</html> 


| 本 章 结束 语 | 


本 章 主要 学 习 了 利用 canvas API 进行 绘图 的 方法 ， 包 括 路 径 、 和 矩形 、 描 边 、 文 本 阴影 
和 小 苏 等 。 通 过 本 章 的 学 习 ， 要 求 读者 能 对 canvas 的 绘图 功能 有 一 个 全 面 的 认识 ， 并 且 
能 够 利用 canvas 绘制 出 想 要 的 图 形 和 图 案 效 果 。 


CHAPTER 03 
制作 新 型 的 表 早 


SUMMARY 


表单 是 HTML5 的 最 大 改进 之 一 ，HTML5 表单 大 大 改进 了 表单 的 功 
能 和 语义 化 。 对 于 web 全 上段 开发 者 而 言 ，HTML5 表单 大 大 提高 了 
工作 效率 。 本 章 将 讲解 HTML5 中 表单 的 应 用 。 


图 学 习 目 标 

了 解 表单 应 用 于 何 处 。 

掌握 新 增 的 表单 元 素 、 可 以 使 用 的 属性 及 使 用 方法 。 
学 会 新 增 的 表单 输入 型 控件 的 使 用 方法 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时 。 


知识 导 图 : 
HTML5 form 的 新 特性 
浏览 器 对 HTML5 form 的 支持 情况 
HTML5 中 form 概述 
输入 型 控件 
新 的 表单 元 素 
新 增 属性 


HTML5 中 的 表单 


示例 精 讲 
HTML5 中 forms 应 用 
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[3.1 新 的 表单 元 素 | 


在 HTML5 Form 中 ， 添 加 了 一 些 新 的 表单 元 素 ， 这 些 元 素 能 够 更 好 地 帮助 完成 开发 
工作 ， 同 时 也 能 更 好 地 满足 客户 的 需求 ， 下 面 就 来 一 起 学 习 这 些 新 的 表单 元 素 。 
本 节 介 绍 的 表单 元 素 包 括 : datalist、keygen、Onutput 


转 3.1.1 datalist 元 素 


<datalist> 标签 定义 选项 列表 ,请 与 input 元 素 配 合 使 用 该 元 素 , 来 定义 input 可 能 的 值 。 
datalist 及 其 选项 不 会 被 显示 出 来 ， 它 仅仅 是 合法 地 输入 值 列表 。 
请 使 用 input 元 素 的 list 属性 来 绑 定 datalist。 


小 试 身手 : 新 型 表单 元 素 datalist 的 使 用 


<datalist> 元 素 使 用 代码 如 下 : 


<input list="cars" /> 
<datalist id="cars"> 
<option value="BMW"> 
<option value="Ford"> 
<option value="Volvo"> 
</datalist> 


代码 的 运行 效果 如 图 3-1 所 示 。 


EE 
口 无 标本 文档 x 
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图 3-1 


国 3.1.2 keygen 元 素 


<keygen> 标签 规定 用 于 表单 的 密 钥 生 成 器 字段 。 
当 提 交 表 单 时 ， 私 钥 存 储 在 本 地 ， 公 和 钥 发 送 到 服务 器 。 


小 试 身手 : 表单 的 密 钥 生成 器 字段 


keygen 元 素 使 用 代码 如 下 : 


<!DOCTYPE html> 


制作 新 型 的 表单 


<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title> keygen 元 素 </title> 

</head> 

<body> 

<form action="demo_keygen.asp" method="get"> 
Username: <input type="text" name="usr_name'" /> 
Encryption: <keygen name="security" /> 

<input type="submit" /> 

</form> 

</body> 

</html> 


代码 的 运行 效果 如 图 3-2 所 示 。 


风 D ksen 天 x \\ 
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Username:|www Encryption: 提交 


过 


国 3.1.3 output 元 素 


<output> 标签 定义 不 同类 型 的 输出 ， 比 如 脚本 的 输出 。 
此 新 元 素 是 一 个 不 仅 好 用 而 且 也 好 玩 的 东西 ， 下 面 通过 使 用 output 元 素来 做 出 一 个 简 
易 的 加 法 计算 器 。 


小 试 身手 : 制作 一 个 计算 器 
<output> 元 素 的 使 用 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>output 元 素 </title> 

</head> 

<form oninput="x.value=parselnt(a.value)+parselnt(b.value)">0 
<input type="range" id="a" value="50">100 
+<input type="number" id="b" value="50"> 
=<output name="x" for="a b"></output> 
</form> 

</body> 

</html> 


代码 的 运行 效果 如 图 3-3 所 示 。 


ES [BJ[SIET 去 
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[3.2 ”新 的 表单 属性 


下 面 看 一 下 HITMLS 新 增 的 特性 。 与 新 增 的 输入 控件 一 样 ， 不 管 目标 浏览 器 是 否 支持 
新 增 的 特性 ， 都 可 以 放心 使 用 ， 这 主要 是 因为 现在 大 多 数 浏览 器 在 不 支持 这 些 特性 时 ， 会 
忽略 它们 ， 而 不 是 报错 。 


国 3.2.1 form 属性 


在 HIML4 中 ， 表 单 内 的 从 属 元 素 必须 书写 在 表单 内 部 ， 但 是 在 HIML5 中 ， 可 以 
把 它们 书写 在 页 面 的 任何 位 置 ， 然 后 给 元 素 指定 一 个 form 属性 ， 属 性 值 为 该 表单 单位 的 
ID， 这 样 就 可 以 声明 该 元 素 从 属于 指定 表单 了 。 
小 试 身手 : 提交 表单 的 制作 


提交 表单 的 代码 如 下 : 


<form action="" id="myForm"> 
<input type="text" name=""> 
</form> 


<input type="submit" form="myForm" value=" 提交 "> 


代码 的 运行 效果 如 图 3-4 所 示 。 
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制作 新 型 的 表单 


: 在 上 面 的 案例 中 ， 提 交 表 单 并 没有 写 在 <form> 表单 元 素 内 部 ， 如 果 是 
之 前 的 HIML 版 本 ， 那 么 这 个 提交 按钮 在 页 面 中 只 是 个 可 以 看 但 是 却 没有 
用 的 按钮 ; 但 是 在 HITML5 中 为 它 加 入 了 form 属性 ， 使 得 它 即便 没有 写 在 
<form> 表单 中 ， 也 依然 可 以 执行 自己 的 提交 动作 ， 这 样 带 来 的 好 处 是 大 大 
| 方便 了 在 写 页 面 布局 时 所 需要 考虑 的 页 面 结构 是 否 合理 。 


国 3.2.2 ”formaction 属性 


在 HIML4 中 ， 一 个 表单 内 的 所 有 元 素 都 只 能 通过 表单 的 action 属性 统一 提交 到 另 一 
个 页 面 ， 而 在 HTML5 中 ， 可 以 给 所 有 的 提交 按钮 ， 如 <input type=”submit” />、<input 
type=”image” src=”” 人 > 和 <button type=”submit”></button> 都 增加 不 同 的 formaction 
属性 ， 使 得 点 击 不 同 的 按钮 ， 可 以 将 表单 中 的 内 容 提交 到 不 同 的 页 面 。 

代码 示例 如 下 : 


<form action="" id="myform"> 

<input type="text" name=""> 

<input type="submit" value="" formaction="a.php"> 
<input type="image" src="16t.png" formaction="b.php"> 
<button type="submit" formaction="c.php"></button> 
</form> 


| 除了 formaction 属性 之 外 ， 还 有 formenctype、formmethod 和 formtarget | 
1 等 属性 也 可 以 重 载 form 元 素 的 enctype、method 和 target 等 属性 。 ) 


国 3.2.3 placeholder 属性 


Placeholder 也 就 是 输入 占 位 符 ， 是 出 现在 输入 框 中 的 提示 文本 ， 当 用 户 点 击 输入 栏 时 ， 
它 就 会 自动 消失 。 一 般 来 说 ，placeholder 属性 都 是 提示 用 户 在 文本 框 内 应 该 输入 的 内 
容 或 者 是 规则 。 如 果 浏 览 器 不 支持 此 属性 的 话 就 会 被 自动 忽略 ， 显 示 浏览 器 默认 的 状态 。 
当 输 入 框 中 有 值 或 者 获得 焦点 时 ， 不 显示 placeholder 的 值 。 

其 使 用 方法 也 是 非常 简单 的 ， 只 要 在 input 输入 类 型 中 加 入 placeholder 属性 ， 然 后 指 
定 提示 文字 即 可 。 


小 试 身手 : 占 位 符 的 使 用 方法 


输入 占 位 符 的 代码 如 下 : 


<input type="text" name="username" placeholder=" 请 输入 用 户 名 "/> 


代码 的 运行 效果 如 图 3-5 所 示 。 
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请 输入 用 户 


扒 


-oe 


团 3.2.4 list 属性 

在 HTML5 中 ， 为 单行 文本 框 增加 了 list 属性 ， 该 属性 的 信 为 某 个 datalist 元 素 的 id。 
Datalist 元 素 也 是 HTMLS 中 的 新 增 元 素 ， 该 元 素 类 似 于 选择 框 ， 但 是 当 用 户 想 要 设置 的 
值 不 在 选择 列表 之 内 时 ， 允 许 其 自行 输入 。 
小 试 身手 : list 属性 的 用 法 


list 属性 的 用 法 代码 如 下 : 


<input list="cars" /> 
<datalist id="cars"> 
<option value="BMW"> 
<option value="Ford"> 
<option value="Volvo"> 
</datalist> 


代码 的 运行 效果 如 图 3-6 所 示 。 
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国 3.25 min 和 max 属性 


min 与 max 这 两 个 属性 是 数值 类 型 或 日 期 类 型 的 input 元 素 的 专用 属性 ， 它 们 限制 了 
在 input 元 素 中 输入 的 数字 与 日 期 的 范围 。 


小 试 身手 : 设置 输入 值 的 范围 


min 和 max 属性 代码 如 下 : 
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制作 新 型 的 表单 


<input type="number" min="0" max="100" /> 


代码 运行 效果 如 图 3-7 所 示 。 
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国 3.2.6 novalidate 属性 


新 版 本 的 浏览 器 会 在 提交 时 对 E-mail、number 等 语义 input 做 验证 ， 有 的 会 显示 验证 
失败 信息 ， 有 的 则 不 提示 失败 信息 ， 只 是 不 提交 。 因 此 ， 为 input、button 和 form 等 增加 
novalidate 属性 ， 则 只 提交 表 ， 而 进行 的 有 关 检 查 会 被 取消 ， 表 单 将 无 条 件 提交 。 


小 试 身手 : novalidate 属性 的 用 法 
novalidate 属性 用 法 的 代码 如 下 : 


<form action="novalidate" > 
<input type="text"> 

<input type="email"> 

<input type="number"> 

<input type="submit" value=""> 


</form> 


代码 的 运行 效果 如 图 3-8 所 示 。 
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国 3.2.7 multiple 属性 
multiple 属性 允许 在 输入 域 中 选择 多 个 值 。 通 常 适用 于 多 e 类 型 。 
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小 试 身手 : 同时 选择 多 个 文件 的 方法 


multiple 的 使 用 代码 示例 如 下 。 


<input type="file" multiple /> 


代码 的 运行 效果 如 图 3-9 所 示 。 
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GC © filey///C:/Users/Admi... 康 


选择 文件 | 3 个 文件 


eh 


上 述 代 码 file 类 型 本 来 只 能 选择 一 个 文件 ， 但 是 加 上 multiple 之 后 却 可 以 同时 选择 多 
个 文件 进行 上 传 操 作 。 


国 3.2.8 step 属性 
step 属性 控制 input 元 素 中 的 值 增加 或 减少 时 的 步 幅 。 
小 试 身手 : 增加 或 减少 时 的 步 幅 的 方法 


step 的 应 用 代码 示例 如 下 : 


<input type="number" step="4"/> 


代码 的 运行 效果 如 图 3-10 所 示 。 


EETSIm) 


无 标题 文档 x Wl 
CG |© file///C:/Users/Admi... 公 
洪 应 用 口 建议 网 站 


0 
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L3.3 ”表单 的 输入 型 控件 | 


HIML5 拥有 多 个 新 的 表单 输入 型 控件 。 这 些 新 特性 提供 了 更 好 的 输入 控制 和 验证 。 
下 面 介绍 这 些 新 的 表单 输入 型 控件 。 


围 3.3.1 Input 类 型 E-mail 
E-mail 类 型 用 于 应 该 包含 E-mail 地 址 的 输入 域 。 


制作 新 型 的 表单 


在 提交 表单 时 ， 会 自动 验证 E-mail 域 的 值 。 


小 试 身手 : 提交 到 邮箱 的 方法 
E-mail 地 址 的 输入 域 示例 代码 如 下 : 
E-mail: <input type="email" name="email_url" /> 


代码 的 运行 效果 如 图 3-11 所 示 。 


区 口 无 标本 文档 
GC |© filey///C:/Users/Admi... 六 


汇 应 用 站 建议 网 站 


E-mail: |deshengshufang@163.com 


图 3-11 


国 3.3.2 Input 类 型 url 


rl 类 型 用 于 应 该 包含 url 地 址 的 输入 域 。 
当 添 加 此 属性 后 ， 在 提交 表单 时 ， 表 单 会 自动 验证 url 域 的 值 。 
代码 示例 如 下 : 


Home-page: <input type="url" name="user_url" /> 


7 a 
iPhone 中 的 Safari 浏览 器 支持 url 输入 类 型 ， 并 通过 改变 触摸 屏 键盘 来 | 
配合 它 〈 添 加 .com 选项 ) 。 


国 3.3.3 Input 类 型 number 


number 类 型 用 于 应 该 包含 数值 的 输入 域 。 并 且 能 够 设 定 对 所 接受 的 数字 的 限定 。 
代码 示例 如 下 : 


points: <input type="number" name="points" max="10" min="1" /> 


请 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 : 

@ Max: number 规定 允许 的 最 大 值 。 

Min: number 规定 允许 的 最 小 值 。 

Step: number 规定 合法 的 数字 间隔 (如 果 step=“3”， 则 合法 的 数 是 
-3,0,3,6 等 ) 。 

@ Valu: number 规定 默认 值 。 


国 3.3.4 Input 类 型 range 


range 类 型 用 于 应 该 包含 一 定 范围 内 数字 值 的 输入 域 。 


Iange 类 型 在 页 面 中 显示 为 可 移动 的 滑动 条 。 


小 试 身手 : 设 定 对 所 接受 的 数字 的 限定 


代码 示例 如 下 : 


<input name="range" type="range" value="20" min="2" max="100" step="5" /> 


请 使 用 下 面 的 属性 来 规定 对 数字 类 型 的 限定 : 


忆 
灵 


: number 规 定 允 许 的 最 大 值 。 


Min: number 规定 允许 的 最 小 值 。 
Step: number 规定 合法 的 数字 间隔 (如果 step=“3”， 则 合法 的 数 是 -3,0,3,6 等 ) 。 


Value: number 规定 默认 值 。 


代码 的 运行 效果 如 图 3-12 所 示 。 


| [sjl=s[el ¥ 


口 无 标题 文档 x 
GC |© filey//C:/Users/Admi... 六 
洪 应 用 癌 建议 网 站 


图 3-12 


国 3.3.5 Input 类 型 Date Pickers 
HTMLS5 拥有 多 个 可 供 选取 日 期 和 时 间 的 新 输入 类 型 ; 


元 


Date: 选取 日 、 月 、 
Month: 选取 月 、 年 
Week: 选取 周 和 年 。 
Time: 选 
Datetime: 选取 时 间 


党 


时间 〈 小 时 和 分 钟 ) 。 


= A ve na 


Datetime-local: 选取 时 间 、 日 、 月 、 年 〈 本 地 时 间 ) 。 


iPhone 中 的 Safari 浏览 器 支持 number 输入 类 型 ， 并 通过 改变 触摸 屏 键 
! 盘 来 配合 它 (显示 数字 ) 。 
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制作 新 型 的 表单 


小 试 身手 : 从 日 历 中 选取 一 个 日 期 


一 个 出 生日 期 的 示例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>date&time 输入 类 型 </title> 
</head> 

<body> 


出 生日 期 : 
<input name="date1" type="date" value="2017-11-31"/> 
出 生 时 间 : 


<input name="time1" type="time" value="10:00"/> 
</body> 
</html> 


代码 的 运行 效果 如 图 3-13 所 示 。 


A [aJ[sIEl ¥ 
了 dategsimet sm x 
CG | © filey//C:/Users/Administrator/Des... 图 从 
江 应 用 站 建议 网 站 
出 生日 期 : | 车/ 月 /日 ”$v | 出生 时 间 : | 10:00 


2018 年 01 月 ~ 4 


周 日 周 - 周二 周三 周 四 局 五 周 六 

人 ke 
7 8 9 10 1 12 13 
14 15 1 17 1 19|120 
21 22 23 24 2 2 27 
28 29 30 3 


图 3-13 


围 3.3.6 Input 类 型 color 


color 类 型 用 于 颜色 ， 可 以 让 用 户 在 浏览 器 当中 直接 使 用 拾 色 器 找到 想 要 的 颜色 。 
color 域 会 在 页 面 中 生成 一 个 允许 用 户 选取 颜色 的 拾 色 器 。 


小 试 身手 : 制作 一 个 拾 色 器 
选择 颜色 的 代码 示例 如 下 : 
color: <input type="color" name="color_type"/> 


代码 的 运行 效果 如 图 3-14 所 示 。 


品 


让 应 用 口 建议 网 站 


无 标量 文本 


x 


CO filey//C/Users/Administrator/Desktop/h5/ 示 例 /第 10 章 /1.. 会 | 


色调 四: 160 红 @@): 0 
亿 和 度 思 ;0 绎 加 : 0 


mm 亮度 册 : 0 基 四 : 0 


NE 定 XE 
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| 3.4 ”制作 一 个 表单 ] 


用 户 注册 页 面 是 所 有 论坛 、SNS 社区 


以 下 几 个 元 素 。 


风 


都 会 忆 


@ 用 户 名 : 作为 登录 使 用 。 


e@ 密码 : 登录 时 使 用 。 


e 邮箱 : 电话 以 及 其 他 个 人 信息 等 。 


在 对 注册 表单 进行 提交 操作 时 通常 都 会 对 


到 的 一 


户 名 、 密 码 和 邮箱 等 信息 进行 验证 ， 一 来 


异常 ， 避 免 用 户 多 次 


是 为 了 防止 非法 字符 进入 数据 库 ， 二 来 也 可 以 很 及 时 地 在 页 面 上 报 
操作 。 

下 面 来 做 一 个 常见 的 注册 表单 ， 来 巩固 本 章 所 学 
步 加 强 对 HIMLS 表单 的 使 用 。 


小 试 身手 : 制 


注册 型 表单 的 代码 实例 如 下 : 


<!IDOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UT 
<title>HTML5 Form 


<style> 


作 二 个 


F-8"> 


ls</title> 


*{margin:0;padding:0;} 


ha{ 

text-align: center; 
background:#ccc; 
| 

form{ 


/* text-align:center, 


ri 


注册 型 表单 


} 

div{ 
padding:10px; 
padding-left:50px; 
.prompt_word{ 
color:#aaa; 

| 

</style> 

</head> 

<body> 

<h1> 用 户 注册 表 </h1> 


<form id="userForm” 


52 /53 


个 界面 ， 作 为 注册 页 面 ， 通 常 有 


习 的 form 及 其 新 增 属性 等 ， 以 进 一 


action="#" 


制作 新 型 的 表单 


method="post" oninput="x.value=userAge.value"> 

<div> 

用 户 名 : <input type="text" name="username" required pattern="[0-9a-zA-z]{6,12}" placeholder=" 
请 输入 用 户 名 "> 

<span class="prompt_word"> 用 户 名 必须 由 6-12 位 英文 字母 或 者 数字 组 成 </span> 

</div> 

<div> 

密码 : <input type="password" name="pwd2" id="pwd1" required placeholder=" 请 输入 密码 " 
pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" /> 

<span class="prompt_word"> 密码 必须 由 英文 字母 开头 和 数字 组 成 的 10-20 位 字符 组 成 </span> 
</div> 


<div> 

确认 密码 : <input type="password" name="pwd2" id="pwd2" required placeholder=" 请 再 次 输入 
密码 " pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" /> 

<span class="prompt_word"> 两 次 密码 必须 一 致 </span> 

</div> 

<div> 

姓名 : <input type="text" placeholder=" 请 输入 您 的 姓名 " /> 

</div> 

<div> 

生日 : <input type="date" id="userDate" name="userDate"> 

</div> 

<div> 

主页 : <input type="url" name="userUrl" id="userUrl"> 

</div> 

<div> 

邮箱 ，<input type="email" name="userEmail" id="userEmail"> 

</div> 

<div> 

年 龄 : <input type="range" id="userAge" name="userAge" min="1" max="120" step="1" /> 
<output for="userAge" name="x"></output> 

</div> 

<div> 

性 别 : <input type="radio" name="sex" value="man" checked> 男 <input type="radio" name="sex" 
value="woman"> 女 

</div> 

<div> 

头像 : <input type="file" multiple> 

</div> 

<div> 

学 历 : <input type="text" list="userEducation"> 


<datalist id="userEducation"> 

<option value=" 初中 "> 初中 </option> 
<option value=" 高 中 "> 高 中 </option> 
<option value=" 本 科 "> 本 科 </option> 
<option value=" 硕士 "> 硕士 </option> 
<option value=" 博士 "> 博士 </option> 


<option value=" 博士 后 "> 博士 后 </option> 

</datalist> 

</div> 

<div> 

个 人 简 介 : <textarea name="userSign" id="userSign" 
cols="40" rows="5"></textarea> 
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</div> Das 办 

2 局 eCJsersAommistrator/Desktop /ns/ m1/1015 Pm | 
<input type="checkbox" name="agree" id="agree"><label 用 户 注册 表 
for="agree"> 我 同意 注册 协议 </label> eS js - 

</div> Me :ENE 

</form> eg 可 

<div> 四 四 

<input type="submit" value=" 确认 提交 " form="userForm" E39 

人 和 

</div> 

</body> Fm 

</html> 


代码 的 运行 效果 如 图 3-15 所 示 。 


15 


| 3.5 课堂 练习 | 


完成 如 图 3-16 所 示 的 一 个 表单 。 


EEISIE) 
D zx x (CN 
Ca 
厂 HTML5 新 增 表单 元 素 

邮箱 
地 址 
日 其 年 /月 /日 
时 间 = 
月 份 一 -年 -月 
星 明 一 -年 备 一 周 
滑动 条 
颜色 Ll 

图 3-16 


从 图 3-16 可 以 看 出 ， 包 括 了 本 节 所 讲 的 部 分 重要 知识 点 ， 图 3-16 效果 的 代码 如 下 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 


制作 新 型 的 表单 


<title> 无 标题 文档 </title> 
</head> 
<body> 
<form action="Test.html" method="get"> 
<fieldset> 
<legend>HTML5 新 增 表 单元 素 </legend> 
<table> 
<tr> 
<td> 邮箱 </td> 
<td><input type="email" name="email"></td> 
</tr> 
<tr> 
<td> 地 址 </td> 
<td><input type="url" name="url"></td> 
</tr> 
<tr> 
<td> 日 期 </td> 
<td><input type="date" name="data"></td> 
</tr> 
<tr> 
<td> 时 间 </td> 
<td><input type="time" name="time"></td> 
</tr> 
<tr> 
<td> 月 份 </td> 
<td><input type="month" name="month"></td> 
</tr> 
<tr> 
<td> 星期 </td> 
<td><input type="week" name="week"></td> 
</tr> 
<tr> 
<td> 滑动 条 </td> 
<td><input type="range" name="range"></td> 
</tr> 
<tr> 
<td> 颜色 </td> 
<td><input type="color" name="color"></td> 
</tr> 
<tr> 
<td><input type=" 提交 "></td> 
</tr> 
</table> 
</fieldset> 
</form> 
</body> 
</html> 
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| 强化 训练 “| 


新 型 的 表单 打破 了 以 往 表单 的 老 气 样式 ， 可 以 利用 HIML5 中 新 增 的 表单 知识 制作 出 
很 多 好 看 而 且 新 颖 的 注册 性 表单 。 
请 根据 图 3-17 所 示 的 表单 ， 制 作出 类 似 或 者 相同 的 表单 。 


html 女 


Sa 
操作 提示 : 
此 表单 的 关键 性 代码 如 下 : 
<fieldset> 
<ol> 
<li><label for=username> 用 户 昵称 : </label><input id=username name=username 
autofocus required> 
<li><label for=uemail>Email: </label><input id=uemail type=email name=uemail 
required placeholder="example@domain.com"> 
<li><label for=age> 工 作 年 龄 : </label><input id=age type=range name=rangel max="60" 
min="18"><output onforminput="value=rangel.value">30</output> 
<li><label for=age2> 年 龄 :</label><input id=age2 type=number required 
placeholder="your age"> 
<li><label for=birthday> 出 生日 期 :</label><input id=birthday type=date> 
<datalist id=searchlist> 
<option label="Google" value="http://www.google.com" /> 
<option label="Baidu" value="http://www.baidu.com" /> 
</datalist></li> 
</ol> 
</fieldset> 


以 上 提示 代码 是 HTML 的 部 分 。 


一 局 m5 
| 本 章 结束 语 | 
本 章 首先 介绍 了 HTML5 Forms 的 新 特性 ， 接 着 讲解 了 各 大 浏览 器 对 HIML5 Forms 
的 支持 情况 ， 然 后 对 新 的 输入 型 控件 、 表 单元 素 和 表单 属性 做 了 详细 介绍 ， 最 后 通过 一 个 
实例 巩固 对 HTMLS5 Forms 的 使 用 。 
通过 本 章 的 学 习 ， 体 会 到 HTMLS5 表单 的 强大 功能 和 便利 性 。 通 过 对 表单 这 些 新 的 输 
入 类 型 和 特性 的 实践 ， 强 化 了 对 表单 的 应 用 。 


CHAPTER 04 
地 理 位 置 


本 章 概述 

地 理 信 息 定 位 在 被 广泛 地 应 用 在 当今 的 科研 、 侦 查 和 安全 等 领域 。 
在 HTML5 当中 ， 使 用 Geolocation AP1 和 position 对 象 ， 可 以 
获取 用 户 当 前 的 地 理 位 置 ， 同 时 也 可 以 将 用 户 当前 所 在 的 地 理 位 
置信 息 在 地 图 上 标注 出 来 。 本 章 学 习 有 关 地 理 位 置信 息 处 理 的 相 


图 学 习 目 标 

掌握 Geolocation 属性 的 使 用 方法 。 

了 解 浏 览 器 对 Geolocation 的 支持 情况 。 
学 会 在 页 面 上 使 用 地 图 的 基本 方法 。 


男 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时 。 


知识 导 图 : 


经 续 度 坐标 
_ IP 地 址 定位 数据 
| 地 理 位 置信 息 |e GPS 和 WiFi 定位 数据 


自 定义 定位 信息 
GeolocationAPI 概述 


a 浏览 器 对 Geolocation 的 支持 |S 。 Geolocation 的 浏览 器 支持 情况 


应 用 隐私 保护 机 制 


-| 隐私 处 理 |e| 。 处 理 位 置信 息 


检测 浏览 器 是 否 支持 


| 一 | 使 用 GeolocationAPI | 日 ”位置 请 求 


在 地 图 上 显示 你 的 位 置 
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| 4.1 关于 地 理 位 置信 息 


HTML5 怎样 获取 地 理 信 息 , 如 HIML5 怎样 获取 让 地 址 、 怎 样 实现 GPS 导航 定位 、 
Wi-Fi 基站 的 mac 地 址 服务 等 ， 这 些 在 HTML5 中 都 已 经 由 API 实现 了 ， 用 户 可 以 轻 
松 使 用 HTML5 技术 进行 操作 。 下 面 详细 介绍 如 何 使 用 HTMLS5 操作 地 理 信 息 。 


国 4.1.1 经 度 和 纬度 坐标 


经 纬度 是 经 度 与 纬度 的 结合 组 成 一 个 坐标 系统 ， 称 为 地 理 坐 标 系统 ， 它 是 一 种 利用 
三 度 空间 的 球面 来 定义 地 球 上 的 空间 的 球面 坐标 系统 ， 能 够 标示 地 球 上 的 任何 一 个 位 置 。 
纬 线 和 经 线 一 样 是 人 类 为 度量 方便 而 假设 出 来 的 辅助 线 ， 定 义 为 地 球 表面 某 点 随地 
球 自转 所 形成 的 轨迹 。 任 何 一 根 纬 线 都 是 圆 形 且 两 两 平行 的 。 纬 线 的 长 度 是 赤道 的 周 长 
乘 以 纬 线 的 纬度 的 余弦 ， 因 此 赤道 最 长 ， 离 赤道 越 远 的 纬 线 ， 周 长 就 越 短 ， 到 了 两 极 便 
缩 为 0。 从 赤道 向 北 和 向 南 各 分 90”， 称 为 北纬 和 南 纬 ， 分 别 用 “N” 和 “S” 表 示 。 

经 线 也 称 子午 线 ， 和 纬 线 一 样 是 人 类 为 度量 方便 而 假设 出 来 的 辅助 线 ， 定 义 为 地 
球 表面 连接 南北 两 极 的 大 圆 线 上 的 半圆 弧 。 任 意 两 根 经 线 的 长 度 相 等 ， 相 交 于 南北 两 
极点 。 每 一 根 经 线 都 有 其 相对 应 的 数值 ， 称 为 经 度 。 经 线 指示 南北 方向 。 

子午 线 命名 的 由 来 : “ 某 一 天 体 视 运 动 轨迹 中 ， 同 一 子午 线 上 的 各 点 与 该 天 体 在 
上 中 天 〈 午 ) 与 下 中 天 〈 子 〉 出 现 的 时 刻 相同 。” 不 同 的 经 线 具有 不 同 的 地 方 时 。 偏 
东 的 地 方 时 要 比较 早 ， 偏 西 的 地 方 时 要 迟 。 


国 4.1.2 IP 地 址 定位 数据 


下 地 址 被 用 来 给 Intemet 上 的 电脑 分 配 一 个 编号 .每 台 联网 的 PC 上 都 需要 有 下 地 址 ， 
才能 正常 通信 。 可 以 把 “个 人 电脑 ” 比 作 “一 台电 话 ”， 那 么 “ 卫 地 址 ”就 相当 于 “ 电 
话 号 码 ”， 而 Intemet 中 的 路 由 器 ， 就 相当 于 电信 局 的 “程控 式 交换 机 ”。 

卫 地 址 是 一 个 32 位 的 二 进 制 数 ， 通 常 被 分 割 为 4 个 “8 位 二 进 制 数 ” (也 就 是 4 
个 字 节 ) 。 卫 地 址 通常 用 “点 分 十 进 制 ” 表 示 成 (a.b.c.d) 的 形式 ， 其 中 ，a,b,c,d 都 是 
0~255 之 间 的 十 进 制 整数 。 例 ;点 分 十 进 瑟 地 址 〈100.4.5.6) ， 实 际 上 是 32 位 二 进 制 
数 〈01100100.00000100.00000101.00000110) 。 


可 


国 4.1.3 GPS 和 Wi-Fi 地 理 定位 数据 


GPS 是 英文 Global Positioning System (全 球 定位 系统 ) 的 简称 。GPS 诞生 于 1958 
年 美国 军 方 的 一 个 项 目 ，1964 年 投入 使 用 。 利 用 该 系统 ， 用 户 可 以 在 全 球 方位 内 实现 
全 天 候 、 连 续 和 实时 的 三 围 导航 定位 和 测速 。 另 外 ， 利 用 该 系统 ， 用 户 还 可 以 进行 高 
精度 的 事件 传递 和 高 精度 的 精密 定位 。 

与 他 地 址 定位 不 同 的 是 ， 使 用 GPS 可 以 非常 精确 的 定位 数据 ， 但 是 它 
非常 致命 的 缺点 ， 就 是 它 的 定位 事件 可 能 比较 长 ， 这 一 缺点 使 得 它 不 适合 需要 快速 定 
位 响应 数据 的 应 用 程序 。 

Wi-Fi 是 一 种 允许 电子 设备 连接 到 一 个 无 线 局 域 网 (WLAN) 的 技术 , 通常 使 用 2.4G 


地 理 位 置 请 求 


UHF 或 5G SHF ISM 射频 频段 。 连 接 到 无 线 局 域 网 


的 ， 这 样 就 允许 任何 在 WLAN 范 
由 Wi-Fi 联盟 所 持 有 。 
有 人 把 使 用 正 EE 802.11 系列 协议 的 局 
路 (Wi-Fi 是 WLAN 的 重要 组 成 部 分 
基于 Wi-Fi 的 定 力 定位 数据 具有 定位 准确 ， 可 
优点 ， 但 是 如 果 在 乡村 这 些 无 线 接 入 点 比较 少 的 地 


术 的 品牌 ， 
的 互通 性 。 
于 无 线 网 际 


通常 是 有 密码 保护 的 ， 但 也 可 以 是 开放 


围 内 的 设备 都 互 


以 连接 上 。Wi-Fi 是 一 


个 无 线 网 络 通信 技 


的 是 改善 基于 IEEE 802.11 标准 的 无 线 网 路 产品 之 间 


域 网 称 为 无 线 保 真 。 甚 至 把 Wi-Fi 等 同 
) 。 

以 在 室内 使 用 ， 以 及 简单 、 快 速 定 位 等 
区 ， 其 定位 效果 就 不 是 很 好 。 


国 4.1.4 用 户 自 定 义 的 地 理 定位 
除了 前 面 讲解 的 几 个 地 理 定位 方式 之 外 ， 还 可 


位 数据 。 例如， 应 


程序 允许 用 户 输入 


应 用 程序 可 以 利用 这 些 信息 来 提供 位 置 感知 服务 。 


当然 ， 由 于 各 种 限制 ， 


己 的 地 址 、 


以 通过 用 户 自 定义 的 方法 来 实现 地 理 定 
联系 电话 和 邮件 地 址 等 一 些 详细 信息 ， 


用 局 


定义 的 地 理 定位 数据 可 能 


的 当前 位 置 改编 后 。 但 是 


户 自 定义 地 理 定位 的 方式 还 


存在 不 准确 的 ， 特 别 是 在 用 户 
还 是 有 很 多 优点 的 ， 具 体 表 现 为 以 下 


两 个 方面 : 能 够 允许 地 理 定 位 


更 快 。 


肛 务 的 结果 作为 备 月 


位 置信 息 ; 用 户 自行 输入 可 


能 会 比 检测 


| 4. 2 浏览 器 对 Geolocation 的 | 


各 个 浏览 器 之 间 对 HTML5 Geolocation 的 支持 情况 是 不 一 样 的 ， 并 处 
本 节 将 对 HTML5 Geolocation API 进行 介绍 


API 的 支持 情况 。 


转 4.2.1 


GeolocationAPI 概述 


HTML5 中 的 GPS 定位 功能 主要 


geolocation 属性 里 ， 


使 用 getCurrentPosition 方法 互 


是 navigatorg 


的 是 getCurrentPosition， 


eolocation 对 象 的 方法 。 


以 获取 


， 讲 解 各 个 浏 ! 


不 断 更 新 中 。 
览 器 之 间 对 HTML5 Geolocation 


该 方法 封装 在 navigator. 


户 当前 


的 地 理 位 置信 息 的 语法 描述 , 如 下 所 示 。 


getCurrentPosition(successCallback,errorCallback,positionOptions); 
(1) successCallback 函数 


表示 调 


面 量 格式 ， 表 示 获 取 到 的 


户 位 置 数 据 。 该 对 象 包含 两 个 属 


中 coords 属性 包含 以 下 7 个 值 : 
@ accuracy: 精确 度 。 


latitude: 

longitude: 
altitude: 海拔 。 
altitudeAcuracy: 
heading: 朝向 。 


纬度 。 


经 度 。 


海拔 高 度 


getCurrentPosition 函数 成 功 以 后 的 匠 


的 精 


确 度 。 


调 函 数 ， 该 函数 带 有 一 个 参数 ， 对 象 字 


性 一 coords 和 timestamp。 其 
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@ speed: 速度 。 
(2) errorCallback 函数 
和 successCallback 函数 一 样 带 有 一 个 参数 ， 对 象 字面 量 格式 表示 返 
包含 以 下 两 个 属性 : 
@ message: 错误 信息 。 
@ code: 错误 代码 。 
中 错误 代码 包括 以 下 4 个 值 : 
@ unknow error: 表示 不 包括 在 其 他 错误 代码 中 的 错误 ， 这 里 可 以 在 
message 中 查找 错误 信息 。 
@ permission denied: 表示 用 户 拒绝 浏览 器 获取 位 置信 息 的 请 求 。 
@ position unavaliable: 表示 网 络 不 可 用 或 者 连接 不 到 卫星 。 
@ timeout: 表示 获取 超时 。 必 须 在 options 中 指定 了 timeout 值 时 才 有 可 能 
发 生 这 种 错误 。 
(3) positionOptions 函数 
positionOptions 的 数据 格式 为 SON， 有 3 个 可 选 属 性 : 
@ enableHighAcuracy 布尔 值 : 表示 是 否 启用 高 精确 度 模 式 ， 如 果 启 用 这 种 
模式 ， 浏 览 器 在 获取 位 置信 息 时 可 能 需要 耗费 更 多 的 时 间 。 
e@ timeout 整数 :表示 浏 览 需要 在 指定 的 时 间 内 获取 位 置信 息 ， 否 则 触发 
erITrOrCallback。 


@ maximumAge 整数 /常量 ; 表示 浏览 器 重新 获取 位 置信 息 的 时 间 间 
小 试 身手 : 使 用 getCurrentPosition 方法 来 获取 当前 位 置信 息 


<!IDOCTYPE HTML> 


<head> 


D 
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名 
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计 
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IN 


右 
卉 0| 
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<script type="text/javascript"> 

function showLocation(position) { 

var latitude = position.coords.latitude; 

var longitude = position.coords.longitude; 
alert("Latitude : " + latitude + " Longitude: " + longitude); 
} 

function errorHandler(err) { 

if(errcode == 1){ 

alert("Error: Access is denied!"); 

jelse if( errcode == 2) { 

alert("Error: Position is unavailable!"); 

} 

} 

function getLocation(){ 

if(navigator.geolocation){ 

// timeout at 60000 milliseconds (60 seconds) 

var options = {timeout:60000}; 
navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options); 
Jelse{ 


地 理 位 置 请 求 
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alert("Sorry browser does not support geolocation!"); 

</script> 

</head> 

<body> 

<form> 

<input type="button" onclick="getLocation();" value="Get Location"/> 
</form> 

</body> 

</html> 


代码 的 运行 效果 如 图 4-1 所 示 。 


口 Untitled-4html 
C | © file///C/Users/Adminis.. 公 | : 


Get Location 


图 4-1 


点 击 按钮 出 现 的 地 理 位 置 如 图 4-2 所 示 。 


口 _ Untitled-4.html x 


G |© filey//C:/Users/Administrator/Deskt... 


Get Location file:/// 想 要 


除了 getCurrentPosition 方法 可 以 定位 用 户 的 地 理 位 置信 息 之 外 ， 还 有 
另外 两 种 方法 。 

第 一 种 : watchCurrentPosition 方法 

该 方法 用 于 定期 自动 地 获取 用 户 的 当前 地 理 位 置信 息 ， 该 方法 的 定义 
如 下 

watchCurrentPosition(successCallback.errorCallback.positionOptions); 

该 方法 返回 一 个 数字 ， 这 个 数字 的 使 用 方法 与 javascript 中 setInterval 


方法 的 返回 参数 的 使 用 方法 类 似 。 该 方法 也 有 3 个 参数 ， 这 3 个 参数 的 使 


鞠 述 。 
| 所 示 。 


! 返回 参数 。 


第 二 种 : clearWatch 方法 
该 方法 用 于 停止 对 当前 用 户 地 理 位 置信 息 的 监视 ， 该 方法 的 定义 如 下 


clearWatch(watchId): 
该 方法 的 参数 Watchid 是 调用 watchPosition 方法 监视 地 理 位 置信 息 时 的 


用 方法 与 getCurrentPosition 方法 中 的 参数 说 明 与 使 用 方法 相同 ， 在 此 不 再 | 


国 4.2.2 ”Geolocation 的 浏览 器 支持 情况 


目前 的 互联 网 运行 着 各 式 各 样 的 浏览 器 


在 此 只 对 五 大 浏览 器 厂商 的 支持 情况 进行 分 


析 。 其 他 的 浏览 器 ， 例 如 国内 的 浏览 器 / 调 多 数 都 是 使 用 无 浏览 器 厂商 的 内 核 ， 所 
以 不 对 其 做 过 多 的 分 析 与 比较 。 
支持 HTML5 Geolocation 的 浏览 器 有 以 下 几 种 : 


IE 浏览 器 。 在 该 


| 4.3 ”隐私 处 理 | 


HIML5 Geolocation 规范 提供 了 一 套 保护 


况 下 ， 不 可 以 获取 


户 的 地 理 位 置信 息 。 


图 4.3.1 应 用 隐私 保护 机 制 


Firefox 浏览 器 。Firefox3.5 及 以 上 版 本 支持 HTML5 Geolocation。 

玄 浏 览 器 中 ， 通 过 Gears 插件 支持 HTML5 Geolocation。 
Opera 浏览 器 。Operal10.0 版 本 及 以 上 版 本 支持 HIMLS Geolocation 。 
Safrai 浏览 器 。 在 Safrai4 以 及 iPhone 中 支持 HTML5 Geolocation。 


户 隐私 的 机 制 。 在 没有 用 户 明确 许可 的 情 


在 用 户 允 许 的 情况 下 ， 其 他 用 户 可 以 获取 用 户 的 地 理 位 置信 息 。 例 如 ， 用 户 在 一 家 商 


店 买 衣服 ， 如 果 应 


程序 可 以 让 他 们 得 知 该 商店 附近 有 一 家 服装 店 正在 打折 ， 那 么 用 户 就 


会 觉得 共享 他 们 的 位 置信 息 是 有 用 的 。 


在 访问 HTML5 Geolocation 
浏览 器 中 执行 HTML5 Geolocation 代码 时 就 会 触发 这 一 


页 中 将 会 弹出 一 个 是 否 确认 分 享 


按钮 时 ， 才 会 获取 


户 的 位 置信 息 。 


图 4.3.2 ”处理 位 置信 息 


户 的 信息 通 


常 属 了 


敏感 信息 ， 因 此 在 接收 到 之 


API 的 页 面 时 ， 会 触发 隐私 保护 机 制 。 例 如 ， 在 Firefox 


隐私 保护 机 制 。 当 执行 代码 时 ， 网 


户 方位 信息 的 对 话 框 ， 只 有 当 用 户 点 击 “ 共 享 位 置信 息 ” 


后 ， 必 须 小 心地 进行 处 理 和 存储 。 如 
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地 理 位 置 请 求 


果 用 户 没有 授权 存储 这 些 信息 ， 那 么 应 用 程序 在 得 到 这 些 信息 之 后 应 立即 删除 。 
在 手机 定位 地 理 数据 时 ， 应 用 程序 应 着 重 提示 用 户 以 下 几 个 方面 的 内 容 。 

掌握 收集 位 置 数据 的 方法 。 

了 解 收集 位 置 数据 的 原因 。 

知道 位 置信 息 能 够 保存 多 久 。 

保证 用 户 位 置信 息 的 安全 。 

掌握 位 置 数 据 共享 的 方法 。 


| 4.4 使 用 Geolocation AP| | 


Geolocation API 用 于 将 用 户 当前 位 置信 息 共享 给 信任 的 站 点 ， 这 涉及 用 户 的 隐私 安全 
问题 ， 所 以 当 一 个 站 点 需要 获取 用 户 的 当前 位 置 时 ， 浏 览 器 会 提示 “人 允许 ”或 者 “拒绝 ”。 
本 节 将 详细 讲解 Geolocation API 的 使 用 方法 。 


国 4.4.1 检测 浏览 器 是 否 支持 
在 做 开发 之 前 需要 知道 浏览 器 是 否 支持 所 要 完成 的 工作 , 以 便 提前 准备 一 些 蔡 代 方案 。 
小 试 身 手 : 检测 浏览 器 是 否 支 持 Geolocation API 


<!DOCTYPE html> 
<html lang="en"> 


<head> 

<meta charset="UTF-8"> 

<title>Document</title> 

<script> 

window.onload = function(){ 

show(); 

function show(){ 

if(navigator.geolocation){ 

document.getElementByld("text").innerHTML=" 您 的 浏览 器 支持 HTML5Geolocation ! "; 
Jelse{ 

document.getElementByld("text").innerHTML= " 您 的 浏览 器 不 支持 HTML5Geolocation ! "; 
Uy 

1 

</script> 

</head> 

<body> 

<h1 id="text"></h1> 

</body> 

</html> 


只 需要 一 个 函数 即 可 检测 到 浏览 


图 4-3 所 示 。 
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是 否 支持 HTML5 Geolocation。 代 码 的 运行 效果 如 


[€ SEE CUsersAdministrat D = O 


您 的 浏览 器 支持 
HTMLSGeolocation ! 


图 4-3 


转 4.4.2 位置 请 求 


定位 功能 〈Geolocation) 是 HIML5 的 新 特性 ， 


此 只 有 在 支持 HIML5 的 现代 浏览 


器 上 运行 ， 特 别 是 手持 设备 如 让 hone， 地 理 定 位 才能 更 加 精确 。 首 先 要 检测 用 户 设备 浏览 


器 是 否 支持 地 理 定位 ， 如 果 支 持 则 获取 地 理 信息 。、 a 户 的 隐私 ， 除 


非 用 户 同意 ， 否 则 


位 ， 选 择 允许 即 可 。 
Js 代码 : 


户 位 置信 息 是 不 可 用 的 ， 所 以 在 访问 该 


function getLocation(){ 


if (navigator.geolocation){ 


时 会 提示 是 否 允 许 地 理 定 


navigator.geolocation.getCurrentPosition(showPosition,showError); 


Jelse{ 


alert(" 浏览 器 不 支持 地 理 定位 。"); 


} 
} 


从 上 面 的 代码 互 


以 知道 ， 如 果 用 户 设备 支持 地 理 定位 ， 


则 运行 getCurrentPosition0 方 


法 。 如 果 getCurrentPosition() 运行 成 功 ， 则 向 参数 showPosition 中 规定 的 函数 返回 一 
个 coordinates 对 象 ，getCurrentPosition() 方法 的 第 二 个 


它 规定 当 获 取 


先 来 看 函数 showError0， 它 规定 获取 


点 代码 ; 


户 位 置 失败 时 运行 的 函数 。 


function showError(error){ 


switch(error.code 


{ 


case error.PERMISSION_DENIED: 


alert(" 定位 失败 ， 
break; 


用 户 拒绝 请 求 地 理 定位 "); 


case errorPOSITION_UNAVAILABLE: 


alert(" 定位 失败 ， 


break; 


位 置信 息 不 可 用 "); 


Case errorTIMEOUT: 


alert(" 定位 失败 ， 


break; 


请 求 获 取 用 户 位 置 超时 "); 


case errorUNKNOWN_ERROR: 


alert(" 定位 失败 
break; 


} 


,定位 系统 失效 "); 


参数 showError 用 于 处 理 错误 ， 


户 地 理 位 置 失败 时 的 一 些 错误 代码 处 理 方式 : 


地 理 位 置 请 求 


} 
再 来 看 函数 showPosition(), 调用 coords 的 latitude 和 longitude， 即 可 获取 用 户 的 纬 
和 经 度 。 

Js 代码 : 


function showPosition(position){ 
var lat = position.coords.latitude; // 纬度 


油 


var lag = position.coords.longitude; // 经 度 
alert(' 纬度 :+lat+', 经 度 :+laBg); 
} 


利用 百度 地 图 和 谷歌 地 图 接口 获取 用 户 地 址 。 

了 解 了 HTML5 的 Geolocation 可 以 获取 用 户 的 经 纬度 ， 现 在 要 做 的 是 把 抽象 的 经 纬 
度 转 成 可 读 的 有 意义 的 真正 的 用 户 地 理 位 置信 息 。 幸 运 的 是 ， 百 度 地 图 和 谷歌 地 图 等 提供 
了 这 方面 的 接口 ， 只 需要 将 HTML5 获取 到 的 经 纬度 信息 传 给 地 图 接口 ， 则 会 返回 用 户 所 
在 的 地 理 位 置 ， 包 括 省 、 市 、 区 信息 ， 甚 至 有 街道 、 门 牌号 等 详细 的 地 理 位 置信 息 。 

首先 在 页 面 定义 要 展示 地 理 位 置 的 div， 分 别 定义 id#baidu_geo 和 id#google geo， 只 
需 修改 关键 函数 showPosition0。 先 来 看 百度 地 图 接口 交互 ， 将 经 纬度 信息 通过 Ajax 方式 
发 送 给 百度 地 图 接口 ， 接 口 会 返回 相应 的 省 、 市 、 区 、 街 道 信息 。 百 度 地 图 接口 返回 的 
是 一 串 JSON 数据 ， 可 以 根据 需求 将 需要 的 信息 展示 给 div#baidu_geo。 注 意 这 里 用 到 了 
jQuery 库 ， 需 要 先 加 载 jQuery 库 文 件 。 

点 代码 ; 


function showPosition(position){ 


var latlon = position.coords.latitude+','+position.coords.longitude; 
//baidu 

var url = 
"http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&.callback=re 
nderReverse&location="+latlon+"&output=json&pois=0"; 
S$.ajax({ 

type: "GET", 

dataType: "jsonp", 

url: url, 

beforeSend: function(}{ 

$("#baidu_geo").html(' 正在 定位 …"); 

» 

success: function (json) { 

if(json.status==0){ 
S$("#baidu_geo").html(json.result.formatted_address); 

} 

} 

error: function (XMLHttpRequest, textStatus, errorThrown) { 
$("#baidu_geo").html(latlon+" 地 址 位 置 获取 失败 "); 

六 

六 


1 


再 来 看 谷歌 地 图 接口 交互 。 同 样 将 经 纬度 信息 通过 Ajax 方式 发 送 给 谷歌 地 医 


回 


接口 会 返回 相应 的 省 、 市 、 区 、 街 道 详细 信息 。 谷 歌 地 图 接口 返回 的 也 是 一 串 


接口 ， 


JSON 数 


据 ， 这 些 JSON 数据 比 百 度 地 图 接口 返回 的 要 更 详细 ， 可 以 根据 需求 将 需要 的 信 
div#google geo。 


Js 代码 : 

function showPosition(position){ 

var latlon = position.coords.latitude+','+position.coords.longitude; 
//google 

var url = 'http://maps.google.cn/maps/api/geocode/json?lating="+latlon+'&language=CN'; 
$.ajax({ 

type: "GET", 

url: url, 

beforeSend: function(){ 

$("#google_geo").html(' 正在 定位 …); 

» 

success: function (json) { 

if(json.status=='OK'){ 

var results = json.results; 

S$.each(results,function(index,array){ 

iflindex==0){ 

S$("#go0gle_geo").html(array['formatted_address']); 


error: function (XMLHttpRequest, textStatus, errorThrown) { 

$("#google_geo").html(latlon+" 地 址 位 置 获取 失败 "); 

} 

六 

} 

以 上 代码 分 别 将 百度 地 
据 实际 情况 进行 调用 。 


| 4.5 在 地 图 上 显示 位 置 | 


本 节 讲 解 如 何 使 用 Google Maps API。 对 于 个 人 和 网 站 而 言 ，Google 的 地 
的 。 使 用 Google 地 图 可 以 轻而易举 地 在 网 站 中 加 入 地 图 功能 。 


吧 | 


接口 和 谷歌 地 图 接口 整合 到 函数 showPosition() 中 


区 


四 


息 展 示 给 


， 可 以 根 


服务 是 免 


图 
在 Web 页 面 上 创建 一 个 简单 地 图 ， 开 发 人 员 需 要 执行 以 下 几 个 步骤 的 操 人 
首先 ， 在 Web 页 面 上 创建 一 个 名 为 map 的 div， 并 将 其 设置 为 相应 的 样式 。 


| 


TT 


次 ， 将 Google Maps API 添加 到 项 目 之 中 。Google Maps API 将 为 Web 页 面 加 载 使 
到 的 Map code。 它 还 会 告知 Google 用 户 所 使 用 的 设备 是 否 具有 一 个 GPS 传感器 。 下 
的 代码 片段 显示 了 某 设 备 如何 加 载 一 个 没有 GPS 传感器 的 Map code。 如 果 设 备 具 有 GPS 
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地 理 位 置 请 求 


传感器 ， 请 将 参数 sensor 的 值 从 false 修改 为 tue。 


<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 


在 加 载 了 API 之 后 ， 就 可 以 开始 创建 


己 的 地 图 


google.maps.LatLng 类 的 实例 ， 并 将 


LatLng 类 的 构造 函数 之 中 ， 传 入 纬度 值 和 经 度 值 。 
地 图 。 


var position = new google.maps.LatLngllatitude, longitude); 


接 下 来 还 需要 设置 地 图 的 选项 。 其 中 包括 以 下 3 个 基本 选项 : 


缩放 (zoom) 级 别 ， 取 值 范围 0-20。 值 为 0 的 视 


则 是 最 大 的 放大 信 数 。 


行 试 验 不 同 的 地 图 样式 。 
表 4-1 


。 在 showPosition 函数 中 ， 创 建 一 个 
保存 在 名 为 position 的 变量 之 中 。 在 该 google. maps. 
面 的 代码 片段 演示 了 丸 


何 创建 一 张 


图 


是 从 


p 星 角度 拍摄 的 基本 视图 ，20 


Google Map 的 基本 样式 


地 图 的 中 心 位 置 ， 这 是 一 个 表示 地 图 中 心 点 的 LatLng 变量 。 
地 图 样式 ， 该 值 可 以 改变 地 图 显示 的 方式 。 表 4-1 详细 地 列 出 


了 可 选 的 值 。 读 者 可 以 


googlemaps.MapTypeId.SATELLITE 显示 使 用 卫星 照片 的 地 图 
显示 公路 路 线 图 


ETEEE 


显示 卫星 地 图 和 公路 路 线 图 的 登 加 


googlemaps.MapTypeId.TERRAIN 显示 公路 名 称 和 地 势 


下 面 的 代码 片段 演示 了 如 何 设置 地 


网 


选项 。 


varmyOptions ={ 

zoom: 18, 

center: position, 

mapTypeld: google.maps.MapTypeld.HYBRID 
所 


最 后 一 个 步骤 是 绘制 地 图 。 根 据 纬度 和 经 度 信息 ， 可 以 将 地 
下 面 是 绘制 地 图 的 代码 ， 为 简洁 


方法 所 取得 的 div 对象 上 。 
代码 。 

代码 如 下 。 

<!ldoctype html> 


<html lang="en"> 
<head> 

<meta charset="utf-8"> 
<title> 地 理 定位 </title> 
<style> 

#map{ 

width:600px; 
height:600px; 
Border:2px solid red; 

} 


</style> 


史 


绘制 在 getElementById 
见 ， 移 除了 错误 处 理 


<script type="text/javascript" src="http:// 
maps.googleapis.com/maps/api/ 
js?sensor=false"> 

</script> 

<script> 

function findYou(){ 
if(tnavigatorgeolocation.getCurrentPosition 
(showPosition, 

noLocation, {maximumAge : 1200000, 
timeout : 30000})){ 
document.getElementByld("lat"). 
innerHTML= 

"This browser does not support 
Beolocation."; 

} 

} 

function showPosition(location){ 

var latitude = location.coords.latitude; 

var longitude = location.coords.longitude; 
var accuracy = location.coords.accuracy; 

// 创建 地 图 

var position = new google.maps. 
LatLng(latitude, longitude); 

// 创建 地 图 选项 

var myOptions ={ 

zoom: 18, 

center: position, 

mapTypeld: google.maps.MapTypeld. 
HYBRID 

b 

// 显示 地 图 

var map = new google.maps. 
Map(document.getElementByld("map'"), 
myOptions); 
document.getElementByld("lat"). 
innerHTML= 

"Your latitude is " + latitude; 
document.getElementByld("lon"). 
innerHTML= 

"Your longitude is " + longitude; 


document.getElementByld("acc"). 


HTML5 允许 开发 人 员 创 建 具有 地 理 位 置 感知 功能 的 Web 页面。 使 
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innerHTML= 

"Accurate within " + accuracy + " meters"; 

. 

function noLocation(locationError) 

{ 

var errorMessage = document. 
getElementByld("lat"); 
switch(locationError.code) 

1 

case locationError.PERMISSION_DENIED: 
errorMessage.innerHTML= 

"You have denied my request for your 
location."; 

break; 

case locationError.POSITION_UNAVAILABLE: 
errorMessage.innerHTML= 

"Your position is not available at this time."; 
break; 

case locationErrorTIMEOUT: 
errorMessage.innerHTML= 

"My request for your location took too 
long."; 

break; 

default: 

errorMessage.innerHTML= 

"An unexpected error occurred."; 

1 

1 

findYou(); 

</script> 

</head> 

<body> 

<h1> 找到 你 啦 ! </h1> 

<p id="lat">&nbsp;</p> 

<p id="lon">&nbsp;</p> 

<p id="acc">&nbsp;</p> 

<div id=' 
</div> 
</body> 
</html> 


map"> 


navigator. 


geolocation 新 功能 ， 可 以 快速 地 获取 
可 以 获得 终端 用 户 的 纬度 和 经 度 。 


户 的 地 理 位 置 。 例 如 ,使 


getCurrentPosition 方法 


地 理 位 置 请 求 


跟踪 用 户 所 在 的 地 理 位 置 肯定 会 给 其 带 来 一 些 对 隐私 的 担忧 ， 因 此 geolocation 技 
术 完 全 取决 于 用 户 是 否 允 许 共享 自己 的 地 理 位 置信 息 。 在 未 经 用 户 明确 许可 的 情况 下 ， 
HTML5 不 会 跟踪 用 户 的 地 理 位 置 。 

尽管 HIMLS 的 Geolocation API 对 于 确定 地 理 位 置 非 常 有 用 ， 但 在 页 面 中 添加 
Google Maps API 可 以 使 该 geolocation 技术 更 贴近 生活 。 只 要 数 行 代码 ， 就 可 以 将 一 个 完 
整 的 具有 交互 功能 的 Google 地 现在 Web 页 面 一 个 指定 的 div 之 中 ， 还 可 以 在 地 图 指 


定 的 位 置 上 设置 一 些 图 标 。 


区 


| 4.6 课堂 练习 | 


定位 自己 所 在 的 城市 ， 如 图 4-4 所 示 。 


DD Geolocation Compone x 


Ca 


操作 代码 如 下 : 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title> 定位 所 在 的 城市 </title> 
<meta name="viewport" content="width=device-width,initial-scale=1, 
minimum-scale=1,maximum-scale=1,user-scalable=no"> 
<style> 
* {margin: 0; padding: 0; border: 0;} 
body{ 
position: absolute; 
width: 100%; 
height: 100%; 
;i 
#geoPage, #markPage { 
position: relative; 
} 
</style> 
</head> 
<body> 
<!-- 通过 iframe 嵌入 前 端 定位 组 件 ， 此 处 没有 隐 荐 定位 组 件 ， 使 用 了 定位 组 件 的 在 定位 中 
视觉 特效 -> 
<iframe id="geoPage" width="100%" height="30%" frameborder=0 scrolling="no" 


src="https://apis.map.qq.com/tools/geolocation?key=OB4BZ-D4W3U-B7VVO-4PIWW-6TKDJ-WPB7 
7&referer=myapp&effect=zoom"></iframe> 
<script type="text/JavaScript"> 
var loc; 
var isMaplnit = false; 
// 监听 定位 组 件 的 message 事件 
window.addEventListener('message', function(event) { 
loc = event.data; // 接收 位 置信 息 
console.log('location', loc); 
if(loc && loc.module == 'geolocation') { // 定位 成 功 ，, 防止 其 他 应 用 也 会 向 该 页 面 post 
信息 ， 需 判断 module 是 否 为 'geolocation' 
var markUrl = 'https://apis.map.qq.com/tools/poimarker + 
'?marker=coord:' + loc.lat + ',' + loc.Ing + 
"title: 我 的 位 置 ;addr:' + (loc.addr | | loc.city) + 
'&key=OB4BZ-D4AW3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp'; 
// 给 位 置 展示 组 件 赋值 
document.getElementByld(',markPage').src= markUrl; 
}else {// 定位 组 件 在 定位 失败 后 ， 也 会 触发 message, event.data 为 null 
alert( 定位 失败 '); 
} 
少 另 一 个 使 用 方式 
if(lsMaplnit && !loc){ // 首次 定位 成 功 ， 创 建 地 图 


isMaplnit = true; 


createMap(event.data); 


jelseif (event.data) {// 地 图 已 经 创建 ， 再 收 到 新 的 位 置信 息 后 更 新 地 图 中 心 点 
updateMapCenter(event.data); 


} 
2 
}, false); 
// 为 防止 定位 组 件 在 message 事件 监听 前 已 经 触发 定位 成 功 事件 ， 在 此 处 显示 请 求 一 次 
位 置信 息 
document.getElementByld("geoPage").contentWindow.postMessage('getLocation ，'*#); 
// 设置 6s 超时 ， 防 止 定位 组 件 长 时 间 获 取 位 置信 息 未 响应 
setTimeout(function() { 
if(!loc) { 
// 主动 与 前 端 定位 组 件 通信 (可 选 ) ， 获 取 粗 糙 的 IP 定位 结果 
document.getElementByld("geoPage") 


.contentWindow.postMessage('getLocation.robust’, "*"); 
} 
} 6000); //6s 为 推荐 值 ， 业 务 调用 方 可 根据 自己 的 需求 设置 改 时 间 ， 不 建议 太 短 
</script> 
<!-- 接收 到 位 置信 息 后 通过 iframe 嵌入 位 置 标注 组 件 -> 
<iframe id="markPage"” width="100%" height="70%" frameborder=0 scrolling="no" src=""></ 
iframe> 
</body> 
</html> 
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地 理 位 置 请 求 


强化 训 


练 


本 章 主要 学 习 了 定位 的 知识 , 接着 来 做 一 个 强化 练习 让 大 家 记忆 更 加 深刻 。 根据 图 4-5 
所 示 制 作出 相同 的 定位 。 
LSJIEIGT ¥] 
DD 本 位 模块 x 玫 玖 


CO file///C:/Users/Administrator/Desktop/Untitled-10.html ” 女 


点 击 下 面 的 按钮 ， 获 得 对 应 信息 : 


开始 监听 位 置 


操作 提示 : 
下 代码 如 下 


<script type="text/JavaScript"> 

var geolocation = new qq.maps.Geolocation("0B4BZ-D4W3U-B7VVO-4PIWW-6TKDJ-WPB77"， 
"myapp 

document.getElementByld("pos-area").style.height = (document.body.clientHeight - 110) + 'px'; 

var positionNum = 0; 

var options = {timeout: 8000}; 

function showPosition(position) { 

positionNum ++; 

document.getElementByld("demo").innerHTML += " 序号 : "+ positionNum; 
document.getElementByld("demo").appendChild(document.createElement('pre')).innerHTML = 
JSON.stringify(position, null, 4); 

document.getElementByld("pos-area").scrollTop = document.getElementByld("pos-area"). 


a 


scrollHeight; 

上 
function showErr() { 
positionNum ++; 
document.getElementByld("demo").innerHTML +=" 序 号 : "+ positionNum; document. 
getElementByld("demo").appendChild(document.createElement('p')).innerHTML = " 定位 失败 ! "; 
document.getElementByld("pos-area").scrollTop = document.getElementByld("pos-area"). 
scrollHeight; 

bp 
unction showWatchPosition(){ 
document.getElementByld("demo").innerHTML += " 开始 监听 位 置 ! <br /><br />"; 
geolocation.watchPosition(showPosition); 
document.getElementByld("pos-area").scrollTop = document.getElementByld("pos-area"). 
scrollHeight; 

bp 
function showClearWatch() { 
Beolocation.clearWatch(); 
document.getElementByld("demo").innerHTML += " 停止 监听 位 置 ! <br /><br />"; 
document.getElementByld("pos-area").scrollTop = document.getElementByld("pos-area"). 
scrollHeight; 

上 


</script> 


| 本 章 结束 语 


HTML5 地 理 定 位 可 以 让 广告 商 和 开发 人 员 设 想 出 很 多 办 法 ， 以 充分 利用 用 户 的 地 理 
位 置信 息 。 在 未 来 几 年 ，geolocation 技术 的 应 用 将 会 不 断 成 熟 ， 因 此 如 何 能 够 更 好 地 使 用 
HTML5 地 理 定位 ， 还 需要 在 以 后 的 工作 和 学 习 中 逐渐 去 开发 拓展 。 


CHAPTER 05 
拖 种 上 传 的 应 用 


SUMMARY 


在 HTML5 中 提供 了 直接 支持 拖 放 操作 的 AP1， 支 持 在 浏览 器 与 其 
他 应 用 程序 之 间 的 数据 进行 互相 拖 动 ， 这 也 是 HTML5 中 较为 突出 
的 一 个 部 分 ， 本 章 学 习 拖 蛛 上 传 的 具体 方法 和 用 处 。 


图 学 习 目 标 
掌握 拖 放 AP1 的 使 用 方法 。 
拖 放 AP1 的 应 用 知识 。 


男 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时 。 


知识 导 图 : 
实现 拖 放 API 的 过 程 


拖 放 API datatransfer 对 象 的 属性 与 方法 


拖 钨 上 传 


拖 放 应 用 
拖 放 API 的 应 用 拖 放 列表 


L 51 拖 放 API | 


虽然 HTML5 之 前 已 经 可 以 使 用 mousedown、mousemove 和 mouseup 等 来 实现 拖 放 
操作 ， 但 却 只 支持 在 浏览 器 内 部 的 拖 放 。 而 在 HTML5 中 ， 已 经 支持 在 浏览 器 与 其 他 应 用 
程序 之 间 的 数据 的 互相 拖 动 ， 并 简化 了 有 关 拖 放 的 代码 。 


国 5.1.1 实现 拖 放 API 的 过 程 


在 HIML5 中 实现 拖 放 操作 ， 需 要 如 下 两 个 步骤 : 

第 一 : 把 要 拖 放 的 对 象 元 素 的 draggable 属性 设置 为 tue(draggable=”true”)。 这 样 才 
能 将 该 元 素 进行 拖 放 。 另 外 ，img 元 素 与 a 元 素 (必须 制定 href) 默认 允许 拖 放 。 

例如 : <div draggable=”true”></div> 

第 二 : 编写 与 拖 放 有 关 的 事件 处 理 代码 。 

下 面 介绍 与 拖 放 有 关 的 几 个 事件 : 


ondtagstart 事件 : 当 拖 岛 元 素 开始 被 拖 钨 时 触发 的 事件 ， 此 事件 作用 在 
被 拖 岛 的 元 素 上 。 
ondragenter 事件 : 当 拖 岛 元 素 进入 目标 元 素 时 触发 的 事件 ， 此 事件 用 在 
标 元 素 上 。 

Ondragover 事件 : 当 拖 电 元 素 在 目标 元 素 上 移动 时 触发 的 事件 ， 此 事件 
用 在 目标 元 素 上 。 

Ondrop 事件 : 当 被 拖 外 元 素 在 目标 上 同时 松 开 鼠 标 时 触发 的 事件 ， 此 事 
件 作用 在 目标 元 素 上 。 

Ondragend 事件 : 当 拖 电 完 成 后 触发 的 事件 , 此 事件 作用 在 被 拖 钨 元 素 上 。 


国 5.1.2 dataTransfer 对 象 的 属性 与 方法 


HTML5 支持 拖 电 数据 储存 ， 主 要 使 用 dataTransfer 接口 ， 作 用 于 元 素 的 拖 灸 基础 上 。 
dataTransfer 对 象 包含 以 下 属性 和 方法 。 


dataTransferdropEffrct[=value]: 返回 已 选择 的 拖 放 效 果 ， 如 果 该 操作 效 
果 与 最 初 设置 的 effectAllowed 效 果 不 符 , 则 拖 遇 操作 失败 .可 以 设置 修改 ， 
包含 这 几 个 值 : “none” “copy”“link” 和 “move”。 

dataTransfereffectAllowed[=value]: 返回 允许 执行 的 拖 电 操 作 效果 ， 可 以 


设置 修改 ， 包 含 这 几 个 值 : “none”“copy”“copyLink”“copyMove” 


“link” “lnkMove” “move” “all” 和 “uninitiallzed”。 
dataTransfertypes: 返回 在 dragstart 事件 触发 时 为 元 素 存储 数据 的 格式 ， 
如 果 是 外 部 文件 的 拖 息 ， 则 返回 “files”。 
dataTransfer.clearData([format.data]): 删除 指定 格式 的 数据 ， 如 果 未 指定 
格式 ， 则 删除 当前 元 素 的 所 有 携带 数据 。 
dataTransfer.setData(format,data): 为 元 素 添 加 指定 数据 。 
dataTransfer.getData(format): 返回 指定 数据 ， 如 果 数 据 不 存在 ， 则 返 
空 字符 串 。 
dataTransferfiles: 如 果 是 拖 遇 文 件 ， 则 返回 正在 拖 遇 的 文件 列表 


口 
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拖 钨 上 传 的 应 用 


FileList。 

@ dataTransfer setDragimage(element,x,y): 指定 拖 电 元 素 时 跟随 鼠标 移动 的 
图 片 ，x 和 y 分 别 是 相对 于 鼠标 的 坐标 。 

@ dataTransfer.addElement(element): 添加 一 起 跟随 拖 钨 的 元 素 ， 如 果 想 让 
某 个 元 素 跟随 被 拖 钨 元 素 一 同 被 拖 骂 ， 则 使 用 此 方法 。 


| 5.2 拖 放 API 的 应 用 | 


文件 的 拖 放 在 网 页 中 应 用 广泛 ， 如 何 完成 这 些 不 同类 型 的 文件 拖 放 呢 ? 下 面 根据 两 个 
示例 来 介绍 拖 放 的 具体 应 用 。 


国 5.2.1 拖 放 应 用 


下 面 做 一 个 简单 的 拖 放 小 案例 ， 主 要 步骤 如 下 : 

第 1 步 : 打开 sublime， 创 建 一 个 HTML 文档 。 

第 2 步 : 创建 两 个 div 方 块 区 域 ， 分别 给 上 id 为 “dl” 和 “d2”， 其 中 d2 位 置 将 要 
进行 拖 外 操作 的 div， 所 以 要 给 添加 属性 draggable， 值 为 true。 


HTML 的 代码 如 下 : 

divid="d1"></div> ! Script 代码 如 下 : 

<div id="d2" draggable="true"> 请 拖 蝶 我 </ | 

本 var d1 = document.getElementByld("d1"); 


var d2 = document.getElementByld("d2"); 


第 5 步 : 为 拖 息 区 域 绑 定 事件 ， 分 别 
为 开始 拖 动 和 结束 拖 动 ， 并 让 它们 在 dl 里 


第 3 步 ， 样 式 的 部 分 也 很 简单 , dl 作 ， 
为 投放 区 域 , 面积 大 一 些 , d2 作 为 拖 钨 区 域 ，, 
面积 小 一 些 ， 为 了 更 好 地 区 分 它们 ， 将 其 


- 馈 出 来 。 
边框 颜色 进行 了 改变 。 Ee 
style 代码 如 下 : | d2.ondragstart = function(){ 
人 dl.innerHTML=" 开始 ! "; 
*{margin:0;padding:0;} | } 
#d1{width: 500px; d2.ondragend = function(){ 
Peeht 00 | dlinnerHTML+= "结束 ! "; 
border:blue 2px solid; | } 
} 
#d2{width: 200px;* ' 拖 岛 区 域 的 事件 写 完 之 后 ， 已 经 可 以 
height: 200px; | 看 见 页 面 上 能 够 拖 动 的 d2 区 域 ， 并 能 在 dl 
border red solid2px | 里 看 见 页 面 给 出 的 反馈 ， 但 是 现在 还 并 不 
} | 能 把 42 放 入 到 dl 中 去 。 为 此 ， 还 需要 为 


第 4 步 : 通过 javaScript 来 操作 拖 放 ， 投 放 区 分 别 绑 定 一 系列 事件 ， 是 以 能 够 及 
API 的 部 分 ， 需 要 在 页 面 中 获取 元 素 ， 分 别 ， 时 看 见 页 面 给 的 反馈 。 

获取 到 dl 和 d2 (dl 为 投放 区 域 ，d2 为 拖 ， ”第 6 步 : 在 dl 里 面 写 入 一 些 文字 。 

灸 区 域 )。 ' 


dl.ondragenter = function (e){ 
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dl.innerHTML+=" 进入 "; | 还 需要 深入 完善 这 个 案例 ， 还 可 以 为 这 个 
e.preventDefault(); ! 拖 岛 事件 添加 一 些 数据 。 
人 ee | 第 7 步 : 拖 钨 事件 刚 开 始 时 就 把 数据 
.OnNdragover = functionle, 1 
Ne ， 添加 进去 ， 代 码 如 下 : 


e.preventDefault(); 

} 

d1.ondragleave = function(e){ 
dl.innerHTML+= "离开" 


d2.ondragstart = function(e){ 
e.dataTransfer.setData("myFirst"," 我 的 第 
一 个 拖 昌 小 案例 ! "); 


e.preventDefault(); ! dl.innerHTML =" 开始 ! "; 
} | } 
dl.ondrop = function(e){ 1 


， 数据 myFirst 就 被 放 进 拖 电 事 件 中 了 。 
第 8 步 ， 拖 灸 事件 结束 之 后 再 把 数据 
读 取出 来 ， 代 码 如 下 : 


/alert( "成 功 ! "); 
e.preventDefault(); 
d1.appendChild(d2); 


} dl.ondrop = function(e){ 
dragenter 和 dragover 可 能 会 受到 浏览 ， Walert(" 成 功 ! "); 
器 默认 事件 的 影响 ， 所 以 在 这 两 个 事件 当 ;spreventDefaultl) 
中 使 用 epreventDefault0; 来 阻止 浏览 器 默 ， alert(e.dataTransfer.getData("myFirst")); 
认 事件 | d1.appendChild(d2); 
座 吉 o ， 5 
到 这 里 已 经 实现 了 简单 的 拖 岛 ， 如 果 | 
拖 岛 动作 进行 前 如 图 5-1 所 示 。 
拖 外 动作 进行 后 如 图 5-2 所 示 。 
Is ， PE ” ， Ee 
一 人 2 3 CO 0 ©fle/cser/Administrator/Deskt$ [* 5 :… 三 
571 5-2 


国 5.2.2 拖 放 列表 

想 要 实现 在 页 面 中 有 两 块 区 域 ， 且 两 块 区 域 里 面 可 能 会 有 一 些 子 元 素 ， 通 过 鼠标 的 拖 
灸 让 这 些 子 元 素 在 两 个 父 元 素 里 面 来 回 交换 。 如 何 实现 这 样 的 效果 ? 
小 试 身手 : 拖 放 列表 的 制作 方法 


新 建 一 个 HTML 文档 ， 在 页 面 中 需要 两 个 div 作为 容器 ， 用 来 存放 一 些小 块 的 span。 
HTML 代码 如 下 : 


<div id="content"></div> 


拖 钨 上 传 的 应 用 


<div id="content2"> 
<span>item1</span> 
<span>item2</span> 
<span>item3</span> 
<span>item4</span> 
</div> 


接着 为 文档 中 的 这 些 元 素描 上 样式 ， 
为 了 区 分 两 个 div, 分别 为 两 个 div 描 上 不 


同 的 边框 颜色 。 
CSS 代码 如 下 : 


*{margin:0;padding:0;} 
#content{ 
margin:20px auto; 
width: 300px; 
height: 300px; 
border:2px red solid; 
} 

#content span{ 
display:block; 
width: 260px; 
height: 50px; 
margin:20px; 
background:#ccc; 
text-align:center; 
line-height:50px; 
font-size:20px; 

} 

#content2{ 
margin:0 auto; 
width: 300px; 
height: 300px; 
border:2px solid blue; 
list-style:none; 

} 

#content2 span{ 
display:block; 
width: 260px; 
height: 50px; 
margin:20px; 
background:#ccc; 
text-align:center; 
line-height:50px; 
font-size:20px; 


b 


切 就 绪 ， 


有 多 少 个 


放 操 作 。 因 为 在 开发 时 不 一 定 知道 div 中 
span 子 元 素 ， 所 以 一 般 不 会 直 


接 在 HTML 页 面 中 的 span 元 素 里 


draggable 


注意 的 是 为 每 个 span 
性 之 外 ， 还 要 添加 
flag 属性 在 以 后 的 代码 中 会 有 很 大 作用 ! 


JS 代码 如 下 : 


面 添加 


属性 ， 而 是 通过 JS 动态 地 为 每 个 
span 元 素 添 加 draggable 属性 。 


var cont = document.getElement 


Byld("content"); 


var cont2 = document.getElement 


Byld("content2"); 


var aSpan = document.getElements 


ByTagName("span"); 

for(var i=0;i<aSpan.length;i++){ 
aSpanli].draggable = true; 
aSpanli].flag = false; 
aSpan[i].ondragstart = function(){ 
this.flag = true; 

} 

aSpan[i].ondragend = function(){ 
this.flag = false; 

H 


拖 钨 区 域 的 事件 写 完 了 ， 这 里 特别 要 


除了 添加 draggable 属 
定义 属性 flag， 这 个 


下 面 就 是 投放 区 域 的 事件 ， 需 要 做 什 


么 在 上 一 小 节 中 已 经 介绍 过 了 ， 这 里 不 再 
蒙 述 。 


代码 如 下 : 


cont.ondragenter = function(e){ 
e.preventDefault(); 

} 

cont.ondragover = function(e){ 
e.preventDefault(); 
cont.ondragleave = function(e){ 
e.preventDefault(); 

} 

cont.ondrop = function(e){ 
e.preventDefault(); 

for(var i=0;i<aSpan.length;i++){ 
if(aSpan[i].flag){ 


cont.appendChild(aSpan[i]); 


cont2.ondragenter = function(e){ 
e.preventDefault(); 


cont2.ondragover = function(e){ 
e.preventDefault(); 


cont2.ondragleave = function(e){ 
e.preventDefault(); 


代码 的 运行 效果 如 图 5-3 所 示 。 
拖 钨 后 的 效果 如 图 5-4 所 示 。 
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列表 1 


列表 2 


列表 3 


列表 4 


-二 


| 5.3 ”课堂 练习 | 


cont2.ondrop = function(e){ 
e.preventDefault(); 

for(var i=0;i<aSpan.length;i++){ 
if(aSpan[i].flag}{ 
cont2.appendChild(aSpan[i]); 

了 

| 


现在 ， 代 码 已 全 部 完成 ， 原 理 不 复杂 ， 
操作 很 简单 ， 相 较 于 以 前 使 用 纯 JavaScript 
操作 来 说 已 经 简化 了 很 多 。 
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列表 1 


列表 3 


列表 2 


列表 4 


5-4 


学 习 完 本 章 ， 为 大 家 准备 了 一 个 课堂 练习 。 如 图 5-5 所 示 ， 把 图 片 拖 到 下 面 ， 以 显示 


出 具体 的 价格 和 出 版 的 时 间 。 


2011 作 品 39 
2010 作 品 42 


站 使 用 拖 放 ApI 棕 高 过 插入 


CIa 
日 
书 名 定价 
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拖 钨 上 传 的 应 用 


先 来 制作 整体 部 分 ， 代 码 如 下 : 
<body onLoad="pageload();"> 
<ul> 
<liclass="liF"> 
mg02.jpg 
alt="32" title="2006 作 品 
draggable="true"> 


<img src= 


</l> 
<liclass="liF"> 


<img src="img03.jpg" i 


alt="36" title= 品 
draggable="true"> 
</li> 
<liclass="liF"> 
品 


draggable="true"> 
</l> 
<liclass="liF"> 
<img src="1.jpg" id="img05" 
alt="39" title="2011 作 品 
draggable="true"> 
</l> 
</ul> 
<ulid="ulCart"> 
<liclass="liT"> 
<span> 书 名 </span> 
<span> 定价 </span> 
<span> 数量 </span> 
<span> 总 价 </span> 
</l> 
</ul> 
</body> 


接 下 来 制作 JS 部 分 ， 代 码 如 下 : 


<script type="text/javascript" 


language="jscript" 
src="Js/js6.js"/> 
// JavaScript Document 
function $$(id) { 
return document.getElementByld(id); 
, 
// 自 定义 页 面 加 载 时 调用 的 函数 
function pageload() { 
// 获取 全 部 的 图 书 商品 


var Drag = document.getElements 


ByTagName("img"); 
// 遍历 每 一 个 图 书 商品 
for(varintl = 0; intl < Drag.length; intl++) { 
// 为 每 一 个 商品 添加 被 拖 
放 元 素 的 dragstart 事件 
Draglintl].addEventListener("dragstart", 
function(e) { 
Var objDtf = e.dataTransfer; 
objDtf.setData("text/htm!", 
addCart(this.title, this.alt, 1)); 
» 
false); 
} 
var Cart = $$("ulCart"); 
// 添加 目标 元 素 的 drop 事件 
Cart.addEventListener("drop", 
function(e) { 
var objDtf = e.dataTransfer; 
var strHTML= objDtf getData("text/html"); 
Cart.innerHTML += strHTML; 
e.preventDefault(); 


e.StopPropagation(); 
} 
false); 
} 
// 添加 页 面 的 dragover 事件 
document.ondragover = function(e) { 
// 阻止 默认 方法 ,取消 拒绝 被 拖 放 
e.preventDefault(); 
} 
// 添加 页 面 drop 事件 
document.ondrop = function(e) { 
// 阻止 默认 方法 ,取消 拒绝 被 拖 放 
e.preventDefault(); 
// 自 定义 向 购物 车 中 添加 记录 的 函数 
function addCart(a, b, c) { 
var strHTML = "<li class=? liC’? >"; 
StrHTML += "<span>" +a+"</span>"; 
StrHTML += "<span>" + b+ "</span>"; 
StrHTML += "<span>" + c+ "</span>"; 
strHTML+= "<span>" +b* c+"</span>"; 
strHTML += "</li>"; 
return strHTML; 


</script> 


强化 训练 
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本 章 学 习 了 HTML5 中 的 重要 知识 点 : 文件 的 拖 放 。 在 一 个 网 页 中 ， 很 多 地 方 会 应 用 
到 此 知识 ， 例 如 ， 一 个 提交 表单 会 让 用 户 放 入 证 件 照片 等 文件 。 为 了 加 强 印象 做 一 个 可 以 


拖 久 上 传 文件 的 应 用 效果 的 练习 。 
最 终 效果 如 图 5-6 所 示 。 


遇 用 伯 拖 按 上 信 + 


C 个 合 图 file:///C:/Users/Administrator/Desktop/ 新 建文 件 夫 / 第 7 襄 /7-6.html 地 


操作 提示 : 
样式 的 提示 代码 如 下 : 
<style> 
margin:0; 
padding:0; 
word-wrap: break-word; 
font-family:"Hiragino Sans GB","Hiragino 
Sans GB W3","Microsoft YaHei", 
font-style:normal; 
font-size:100%; 
list-style:none; 
} 
#uploadbox{ 
margin:100px auto; 
width:800px; 
height:150px; 
line-height:150px; 
text-align:center; 
font-size:24px; 
color:#999; 


| 本 章 结束 语 | 


图 5-6 


= RR 


BE 3 三 


border:3px #c0c0c0 dashed; 
position:relative; 
| 
</style> 
Script 提示 代码 如 下 : 


uploadbox.ondrop = function(e) 

! 

e.preventDefault(); 

var fd = new FormDatal(); 

for(var i = 0, j = e.dataTransferfiles.length; i 
<jit+) 

1 

fd.append("files[]", e.dataTransfer.files[i]); 
| 

Upload(fd); 

return false; 


上 


本 章 介绍 了 在 HTML5 中 拖 放 API， 并 介绍 了 常用 的 拖 放 属 性 和 方法 。 关 于 拖 放 API 


的 一 些 更 加 有 趣 的 


法 和 深入 的 探索 还 需要 在 以 后 的 工作 和 学 习 中 慢 慢 挖掘 。 


a 
CSS3 


本 章 概述 


CSS3 是 CSS 技术 的 升级 版 本 , CSS3 语言 开发 是 朝 着 模块 化 发 


展 的 。 


以 前 的 规范 作为 一 个 模块 过 于 庞大 且 十 分 复杂 。 因 此 把 它 分 解 为 


一 些小 的 模块 ， 并 将 更 多 新 的 模块 也 被 加 入 进来 。 


男 学 习 目 标 

掌握 CSS 选择 器 的 种 类 。 

了 解 CSS3 浏览 器 的 支持 情况 。 
掌握 CSS3 的 新 增 属性 和 伪 类 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时 。 


知识 导 图 : 


三 大 基础 选择 器 
集体 选择 器 


CSS 选择 器 
属性 选择 器 


新 增 的 选择 器 


CSS3 与 之 前 版 本 的 异同 点 
CSS3 新 增 的 长 度 单位 
CSS3 新 增 结构 性 伪 类 


-Esc 


CSS3 新 增 UI 元 素 状态 伪 类 


CSS3 新 增 属性 


| 6.1 “SS 选择 器 | 


[=1=| | 


们 进行 样式 修改 的 操作 。 例 如 ， 需 


在 对 页 面 中 的 元 素 进行 样式 修改 时 ， 需 


做 的 是 找到 页 面 中 需 


修改 页 面 中 <div> 标签 的 样式 ， 就 需要 在 样式 表 当 中 


修改 的 元 素 ， 再 对 它 


先 找到 需要 修改 的 <div> 标签 。 然 而 如 何 才能 找到 这 些 需要 修改 的 元 素 呢 ? 这 就 需要 CSS 


中 的 
国 


属性 
的 扩 


中 骨 
选择 
页 


HH 


样式 


选择 器 来 完成 ， 本 节 将 回顾 CSS 中 的 选择 器 。 
6.1.1 三 大 基础 选择 器 


在 CSS 中 ， 选 择 器 可 以 分 为 四 大 种 类 ， 分 别 为 元 素 选择 器 、 类 选择 器 、ZD 选择 器 和 
选择 器 ， 而 由 这 些 选择 器 衍生 出 来 的 复合 选择 器 和 后 代 选 择 器 等 其 实 都 是 这 些 选择 器 


展 应 用 而 已 。 
(1) 元 素 选 择 器 
在 页 面 中 有 很 多 元 素 ， 这 些 元 素 也 是 构成 页 殖 


的 基础 。CSS 元 素 选择 器 用 来 


明 页 面 


些 元 素 使 用 将 要 适 配 的 CSS 样式 。 所 以 ， 页 面 中 每 一 个 元 素 名 都 可 以 成 为 CSS 元 素 


面 中 所 有 的 div 元 素 。 同 理 ， 还 可 以 对 


器 的 名 称 。 例 如 ，div 选择 器 就 是 用 来 选中 页 
中 诸如 p、U、 上 等 元 素 进行 CSS 元 素 选 择 器 上 
的 修改 。 


选取 ， 对 这 些 被 选中 的 元 素 进行 CSS 


小 试 身手 : 元 素 选择 器 的 使 用 方法 


元 素 选择 器 的 代码 实例 如 下 : 


<!IDOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 
<title> 元 系 选 择 器 </title> 
<style> 

pt 

color:green; 

font-size: 25px; 

} 

ul{ 

list-style-type:none; 

} 

af 

text-decoration:none; 

} 

</style> 

</head> 

<body> 

<p> 第 一 行 的 文字 样式 是 绿色 </p> 
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C553 选择 器 


<ul> 

<li> 第 1 个 fi 标签 </li> 

<li> 第 2 个 fi 标签 </li> 

<li> 第 3 个 fi 标签 </li> 

<li> 第 4 个 li 标签 </> 

</ul> 

<a href="#">a 标签 的 样式 </a> 

<p> 第 二 行 的 文字 样式 也 是 绿色 </p> 
</body> 

</html> 


以 上 这 段 CSS 代码 表示 的 是 HTML 页 面 中 所 有 的 <p> 标签 文字 颜色 都 采用 红色 ， 文 
字 大 小 为 20 像素 。 所 有 的 <ul> 无 序列 表 采 用 没有 列表 标记 风格 ， 而 所 有 的 <a> 则 是 取消 
下 划 线 显示 。 每 一 个 CSS 选择 器 都 包含 了 选择 器 本 身 、 属 性 名 和 属性 值 ， 其 中 属性 名 和 
属性 值 均 可 同时 设置 多 个 ， 以 达到 对 同一 个 元 素 声明 多 重 CSS 样式 风格 的 目的 。 

代码 运行 结果 如 图 6-1 所 示 。 


[ajlslel % 


gp 
区 中 元 素 迁 择 器 x WY 
C © file///C/Users/Administrator/Deskt... 会 


第 一 行 的 文字 样式 是 绿色 
第 1 个 li 标签 
第 2 个 li 标签 
第 3 个 li 标签 
第 4 个 li 标签 
a 标 签 的 样式 


第 二 行 的 文字 样式 也 是 绿色 


图 6-1 


(2) 类 选择 器 

在 页 面 中 ， 可 能 有 一 些 元 素 名 并 不 相同 ， 但 是 ， 依 然 需 要 它们 拥有 相同 的 样式 。 如 果 
使 用 之 前 的 元 素 选择 器 来 操作 的 话 就 会 显得 非常 烦琐 ， 所 以 不 妨 换 种 思路 来 考虑 。 假 如 需 
要 对 页 面 中 的 <p> 标签 、<a> 标签 和 <div> 标签 使 用 同一 种 文字 样式 ， 这 时 ， 就 可 以 把 这 三 
个 元 素 看 成 是 同一 种 类 型 样式 的 元 素 ， 所 以 可 以 对 它们 进行 归 类 操作 。 

在 CSS 中 ， 使 用 类 操作 需要 在 元 素 内 部 使 用 class 属性 ， 而 class 的 值 就 是 为 元 素 定 
义 的 “类 名 ”。 


小 试 身手 : 类 选择 器 的 用 法 


类 选择 器 的 使 用 代码 如 下 : 


<body> 
<p class="myTxt"> 我 是 一 行 p 标签 文字 </p> 
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<p class="myTxt"><a class="myTxt" href="#"> 我 是 a 标签 内 部 的 文字 </a></p> 
<div class="myTxt">div 文字 也 和 它们 的 样式 相同 </div> 
</body> 
为 当前 类 添加 样式 
<style type="text/css"> 
.myTxt{ 
color:red; 
font-size: 30px; 
text-align: center; 
} 
</style> 
以 上 两 段 代 码 分 别 是 为 需要 改变 样式 的 元 素 添加 class 类 名 以 及 为 需要 改变 的 类 添加 
CSS 样式 。 这 样 就 可 以 达到 同时 为 多 个 不 同 元 素 同时 添加 相同 的 CSS 样式 的 目的 。 这 里 
需要 注意 的 是 ， 因 为 <a> 标签 自 带 下 划 线 ， 所 以 在 页 面 中 ，<a> 标签 的 内 容 还 是 会 有 下 划 
线 存 在 的 。 如 果 对 此 不 满意 的 话 ， 还 可 以 单独 为 <a> 标签 多 添加 一 个 类 名 〈 一 个 标签 是 
以 存在 多 个 类 名 的 ， 类 名 与 类 名 之 间 使 用 空格 分 隔 ) 。 
代码 如 下 : 
<p class="myTxt"><a class="myTxt myA" href="#"> 我 是 a 标签 内 部 的 文字 </a></p> 
.myAt{text-decoration: none;} 


通过 以 上 代码 就 可 以 实现 取消 <a> 标签 下 划 线 的 目的 ， 两 次 代码 运行 效果 如 图 6-2、 


图 6-3 所 示 。 
SISTISTEJ 中 甘于 返回 x 
D WE x a 
CG © file///C/Users/Administrat... 图 女 lO fey//C/Users/Administrat.. Mg 廊 
洪 应 用 四 建 汶 网 站 洪 应 用 站 建议 网 站 
我 是 一 行 p 标 签 文字 我 是 一 行 p 标 签 文 字 
我 是 a 标签 内 部 的 文字 我 是 a 标签 内 部 的 文字 
div 文 字 也 和 它们 的 样式 相同 div 文 字 也 和 它们 的 样式 相同 
62 6-3 
(3) ID 选择 器 


元 素 选择 器 和 类 选择 器 都 是 对 一 类 元 素 进 行 选取 和 操作 ， 假 设 需要 对 页 面 中 众多 <p> 
标签 中 的 某 一 个 进行 选取 和 操作 ， 便 需要 一 个 独一无二 的 选择 器 。JD 选择 器 就 是 这 样 一 
个 选择 器 ，ID 属性 的 值 是 唯一 的 。 

小 试 身 手 : ID 选择 器 的 使 用 方法 

ID 选择 器 的 使 用 代码 如 下 : 

HTML 代码 
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<p> 这 是 第 1 行文 字 </p> 
<p id="myTxt"> 这 是 第 2 行文 字 </p> 
<p> 这 是 第 3 行文 字 </p> 
<p> 这 是 第 4 行文 字 </p> 
<p> 这 是 第 5 行文 字 </p> 
C55 代码 

<style> 

#myTxt{ 

font-size: 30px; 

color:red; 

} 

</style> 


在 第 二 个 <p> 标签 中 设置 了 id 属性， 并 在 CSS 样式 表 中 对 id 进行 了 样式 的 设置 ， 让 


id 属性 的 值 为 “myTxt” 元 素 字体 大 小 为 30 像素 ， 文 字 颜 色 为 红色 。 
代码 运行 效果 如 图 6-4 所 示 。 


一 [ESJ[LE[ 瑟 | ¥ 
Vorss > 人 
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这 是 第 1 行文 字 


这 是 第 2 行文 字 


这 是 第 3 行文 字 
这 是 第 4 行文 字 
这 是 第 5 行文 字 


园 6.1.2 集体 选择 器 


在 编写 页 面 时 会 遇 到 很 多 个 元 素 都 要 采用 同一 种 样式 属性 的 情况 ， 把 这 些 样式 相同 的 
元 素 放 在 一 起 进行 集体 声明 而 不 是 单个 分 开 ， 这 样 做 的 好 处 就 是 可 以 极 大 地 简化 操作 ， 集 
体 选择 器 就 是 为 了 这 种 情况 而 设计 的 。 


小 试 身手 : 给 所 有 元 素 设置 同一 种 样式 
集体 选择 器 的 使 用 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title> 集体 选择 器 </title> 


<style> 

li,.mytxt,span,a{ 

font-size: 20px; 

color:red; 

} 

</style> 

</head> 

<body> 

<ul> 

<li>item1</li> 

<li>item2</li> 

<li>item3</li> 

<li>item4</li> 

</ul> 

<hr/> 

<p> 这 是 第 1 行文 字 </p> 

<p class="mytxt"> 这 是 第 2 行文 字 </p> 
<p class="mytxt"> 这 是 第 3 行文 字 </p> 
<p class="mytxt"> 这 是 第 4 行文 字 </p> 


</html> 

集体 选择 器 的 语法 就 是 每 个 选择 器 之 
间 使 用 逗号 隔 开 ， 通 过 集体 选择 器 可 以 达 
到 对 多 个 元 素 进行 集体 声明 的 目的 ， 以 上 
代码 选中 了 页 面 中 所 有 的 <l>，<span>， 


| <a> 以 及 类 名 为 “mytxt” 的 元 素 ， 并 且 对 
| 这 些 元 素 进 行 了 集体 的 样式 编写 。 


代码 运行 效果 如 图 6-5 所 示 。 
EJ 画 [ 好 


[| x 


GC | © mle///C/Users/Administrator/Deskt.， 会 | : 


<p> 这 是 第 5 行文 字 </p> 这 是 第 四 行文 字 
<hr/> 这 是 第 五 行文 字 
<span> 这 是 span 标签 内 部 的 文字 </ 
span> 这 是 文字 标签 内 的 文字 
<hr/> 这 是 a 标 等 内 部 的 文字 
<a href="#"> 这 是 a 标签 内 部 的 文字 </a> 6-5 
</body> 
转 6.1.3 属性 选择 器 
CSS 属性 选择 器 可 以 根据 元 素 的 属性 和 属性 值 来 选择 元 素 。 


*[title] {color:red;} 


a[href] {color:red;} 


也 可 以 采取 与 上 面 类 似 的 写法 ， 可 以 只 对 有 href 属性 的 锚 (a 元素 ) 应 


属性 选择 器 的 语法 是 把 需要 选择 的 属性 写 在 一 对 中 括号 中 ， 如 果 想 把 包含 标题 (title) 
的 所 有 元 素 变 为 红色 ， 那 么 可 以 写成 如 下 代码 : 


样式 : 


还 可 以 根据 多 个 属性 进行 选择 ， 只 需 将 属性 选择 器 链接 在 一 起 即 可 。 例 如 ， 为 了 将 同 


时 有 href 和 title 属性 的 HTML 超 链接 的 文本 设置 为 红色 ， 可 以 这 样 写 : 


a[href][title] {color:red;} 


以 上 都 是 属性 选择 器 的 
的 方法 来 使 用 这 个 特性 。 


法 ， 也 可 以 将 以 上 所 学 的 选择 器 组 合 起 来 ， 采 


带 有 创造 性 
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小 试 身手 : 使 用 属性 选择 写 样式 


属性 选择 器 的 使 用 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 


<head> 

<meta charset="UTF-8"> 

<title> 属性 选择 器 </title> 

<style> 

img[alt]{ 

border:3px solid red; 

} 

img[alt="image"]{ 

border:3px solid blue; 

J. 

</style> 

</head> 

<body> 

<img src="meijing.png" alt="" width="300"> 
<img src=" meijing.png " alt="image" width="300"> 
<img src=" meijing.png " alt="" width="300"> 
<img src=" meijing.png " alt="" width="300"> 
.png " alt="" width="300"> 
<img src=" meijing.png " alt="" width="300"> 


<img src=" meiji 


</body> 
</html> 


上 面 这 段 代码 就 是 让 所 有 拥有 alt 属性 的 img 标签 都 有 3 个 像素 宽度 的 边框 ， 且 实 线 
类 型 为 红色 ;但 是 对 alt 属性 的 值 为 image 的 元 素 重新 进行 了 样式 设置 ， 因 为 希望 它 的 边 
框 颜色 可 以 有 所 变化 ， 所 以 设置 为 了 蓝 色 。 

代码 运行 效果 如 图 6-6 所 示 。 


IETISTE 
D es = 
© [© Fe//CTUser/Acministrator/Desktop/m5 2c3sjs/FO 6/6-S him | 
EE LE 


图 6-6 
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CSS 即 层 去 样式 表 (Cascading StyleSheet) 。 在 网 页 制作 时 采用 层 亚 样式 表 技 术 ， 可 
以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精确 的 控制 。 只 要 对 相 
应 的 代码 做 一 些 简单 的 修改 ， 就 可 以 改变 同一 页 面 的 不 同 部 分 ， 或 者 页 数 不 同 的 网 页 的 外 
观 和 格式 。CSS3 是 CSS 技术 的 升级 版 本 ，CSS3 语言 开发 是 朝 着 模块 化 发 展 的 。 以 前 的 
规范 作为 一 个 模块 过 于 庞大 且 比 较 复杂 ， 所 以 ， 将 其 分 解 成 一 些小 的 模块 ， 并 将 更 多 新 的 
模块 加 入 进来 。 这 些 模 块 包括 : 盒子 模型 、 列 表 模块 、 超 链接 方式 、 语 言 模块 、 背 景 和 边 
框 、 文 字 特效 、 多 栏 布局 等 。 


国 6.2.1 CS53 与 之 前 版 本 的 异同 点 


CSS3 作为 之 前 版 本 的 升级 版 本 ， 它 们 之 间 有 什么 关系 ， 有 哪些 相同 的 地 方 ， 又 有 哪 
些 不 同 的 地 方 呢 ? 

与 之 前 的 版 本 相 比 ， 相 同 点 是 它们 都 是 网 页 样式 的 code， 都 是 通过 对 样式 表 的 编辑 
达到 美化 页 面 的 效果 ， 它 们 都 是 实现 页 面 内 容 和 样式 相 分 离 的 手段 。 

不 同 点 是 , 它 引 入 了 更 多 的 样式 选择 和 更 多 的 选择 器 , 加 入 了 新 的 页 面 样式 与 动画 
CSS3 语言 开发 是 朝 着 模块 化 发 展 的 。 但 是 相应 地 CSS3 在 带 来 了 更 多 的 网 页 样式 与 特效 
的 同时 ， 也 产生 了 一 些 兼容 性 问题 。 例 如 CSS3 之 前 的 版 本 被 各 个 浏览 器 支持 ， 而 CSS3 
则 是 对 浏览 器 厂商 发 起 的 一 次 冲击 ， 使 得 一 些 不 能 很 好 兼容 CSS3 新 特性 的 浏览 器 厂商 不 
得 不 尽快 升级 自己 的 浏览 器 内 核 ， 甚 至 使 个 别 浏览 器 厂商 直接 更 换 了 之 前 的 内 核 。 


国 6.2.2 《SS3 新 增 的 长 度 单位 


rem 是 CSS3 中 新 增 的 长 度 单位 。 看 见 rem 就 会 想到 em 单位 ， 因 为 它们 都 表示 倍数 。 
那么 rem 到 底 是 什么 呢 ? 

rem (font size of the root element) 是 指 相对 于 根 元 素 的 字体 大 小 的 单位 。 简 单 地 说 它 
就 是 一 个 相对 单位 。 但 是 它 与 em 单位 所 不 同 的 是 ， em (font size of the element) 是 指 相 
对 于 父 元 素 的 字体 大 小 的 单位 。 它 们 之 间 其 实 很 相似 ， 只 不 过 计算 的 规则 一 个 是 依赖 根 元 
素 ， 一 个 是 依赖 父 元 素 。 

rem 是 一 个 相对 单位 ， 相 对 根 元 素 字 体 大 小 的 单位 ， 简 单 说 就 是 相对 于 HTML 元 素 
字体 大 小 的 单位 。 

这 样 在 计算 与 子 元 素 有 关 的 尺寸 时 ， 只 要 根据 HTML 元 素 字 体 大 小 计算 即 可 。 不 再 
像 使 用 em 时 ， 得 来 回 的 找 父 元 素 字体 大 小 并 频繁 的 计算 ， 根 本 离 不 开 计算 器 。 

HTML 的 字体 大 小 设置 为 font-size:62.5% 原因 : 浏览 器 默认 字体 大 小 是 16px，rem 与 
PX 关系 为 : lrem = 10px，10/16=0.625=62.5%， 为 了 使 子 元 素 相关 尺寸 计算 方便 ， 这 样 写 
最 合适 。 只 要 将 设计 稿 中 量 到 的 px 尺寸 除 以 10 就 会 得 到 相应 的 rem 尺寸 ， 非 常 方便 。 

rem 的 代码 如 下 : 


<!DOCTYPE html> 


<html lang="en"> 


<head> 
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<meta charset="UTF-8"> 
<title>Document</title> 

<style> 

html{font-size: 62.5%;} 

pffont-size: 2rem;} 

div{font-size: 2em} 

</style> 

</head> 

<body> 

<p> 这 是 <span>p 标签 </span> 内 的 文本 </p> 
<div> 这 是 <span>div 标签 </span> 中 的 文本 </div> 
</body> 

</html> 


代码 运行 结果 如 图 6-7 所 示 。 


D rem 
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这 是 p 标 签 内 的 文本 
这 是 div 标 签 中 的 文本 
6-7 


看 起 来 两 种 单位 并 没有 什么 区 别 ， 因 为 在 页 面 中 ， 文 字 大 小 是 完全 相同 的 。 分 别 对 了 
标签 和 div 标签 中 的 span 元 素 进行 字体 大 小 的 设置 ， 看 看 它们 会 发 生 什 么 变化 。 
代码 如 下 : 


p span{font-size: 2rem;} 


div span{font-size: 2em;} 


代码 运行 结果 如 图 6-8 所 示 。 


D rem 


CG |©Ofiley//C/Users/Admi.. 图 全 | : 
江 应 用 站 建议 网 站 


这 ep 标签 weyxx 


六 是 div 标 签 直 gx 
图 6-8 


这 里 可 以 看 出 ,p 标 签 中 的 span 元 素 采 用 了 rem 为 单位 , 元素 内 的 文本 并 没有 任何 变化 ， 
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而 在 div 中 的 span 元 素 采 用 了 em 单位 ， 其 内 的 文本 大 小 已 经 产生 了 二 次 计算 的 结果 。 这 
也 是 写 页 面 时 经 常会 遇 到 的 问题 ， 经 常会 因为 子 级 的 错失 导致 文本 大 小 被 二 次 计算 ， 结 果 
就 是 回头 再 去 改 以 前 的 代码 ， 很 影响 工作 效率 。 


国 6.2.3 《SS3 新 增 结 构 性 伪 类 


在 CSS3 中 新 增 了 一 些 新 的 伪 类 ， 它 们 的 名 字 叫 做 结构 性 伪 类 。 结 构 性 伪 类 选择 器 的 
公共 特征 是 允许 开发 者 根据 文档 结构 来 指定 元 素 的 样式 。 下 面 讲解 这 些 新 增 结构 性 伪 类 。 
(1) :root 伪 类 
匹配 文档 的 根 元 素 。 在 HTML 中 ， 根 元 素 永 远 是 HTML。 

(2) :empty 伪 类 
匹配 没有 任何 子 元 素 (包括 text 节点 ) 的 元 素 E。 


小 试 身 手 : 给 没有 子 元 素 的 元 素 设置 样式 
empty 伪 类 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 


<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div:empty{ 

width: 100px; 

height: 100px; 
background: #fOf000; 

} 

</style> 

</head> 

<body> 

<div> 我 是 div 的 子 级 ， 我 是 文本 </div> 


<div></div> [ajleslel % 


<div> DD Document x 


<span> 我 是 div 的 子 级 ， 我 是 span 标签 </span> CG ©file///C/Users/Admi.. 力 食 
</div> 

</body> 
</html> 我 是 div 的 子 级 ， 我 是 文本 


代码 运行 结果 如 图 6-9 所 示 。 
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我 是 div 的 子 级 ， 我 是 span 标 签 
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(3) :nth-child(n) 伪 类 
:nth-child(n) 选择 器 匹配 属于 其 父 元 素 的 第 N 个 子 元 素 ， 而 不 论 元 素 的 类 型 。 
了 可 以 是 数字 、 关 键 词 或 公式 。 


小 试 身手 : 三 个 示例 讲解 nth-child(n) 选择 器 


案例 一 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

ul linth-child(3){ 
color:red; 

上 

</style> 

</head> 

<body> 

<ul> 
<div>items0</div> 
<li>items1</li> 
<li>items2</li> 
<li>items3</li> 
<li>items4</li> 
</ul> 

</body> 

</html> 


代码 运行 结果 如 图 6-10 所 示 。 


La 
[DY Document x 
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items0 

items1 

items2 

items3 

items4 
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案例 二 代码 如 下 : 
ul li:nth-child(even){ 
color:red; 


ul li:nth-child(odd){ 


color:green; 


} 
代码 运行 结果 如 图 6-11 所 示 。 


EWEISIE) 
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items1 
items2 
items3 
items4 


图 6-11 
使 用 公式 (an +b)。 描 述 ， 表示 周期 的 长 度 ，n 是 计数 器 (从 0 开始 ) ，b 是 偏 移 值 。 


案例 三 代码 如 下 : 


ul li:nth-child(2n+1){ 
color:red; 


} 
代码 运行 结果 如 图 6-12 所 示 。 
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items5 
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items7 
items8 


图 6-12 

(4) :nth-of-type(n) 伪 类 

:nth-of-type(n) 选择 器 匹配 属于 父 元 素 的 特定 类 型 的 第 N 个 子 元 素 的 每 个 元 素 。 

nn 可 以 是 数字 、 关 键 词 或 公式 。 

这 里 需要 注意 的 是 nt 了 h-of-type 和 nth-child 是 不 同 的 ， 前 者 是 从 选择 器 的 元 素 类 型 开 
台 计 数 ， 后 者 是 不 论 元 素 类 型 的 。 

也 就 是 说 ， 与 上 面 的 案例 是 同样 一 段 HIML 代码 ， 使 用 :nth-of-type(3) 就 会 选 到 
items3 的 元 素 ， 而 不 是 之 前 的 items2 的 元 素 。 


小 试 身手 : 给 第 N 个 元 素 设置 样式 
案例 代码 如 下 : 
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<!IDOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

ul li:nth-of-type(3){ 
color:red; 

; 

</style> 

</head> 

<body> 

<ul> 
<div>items0</div> 
<li>items1</li> 
<li>items2</li> 
<li>items3</li> 
<li>items4</li> 
</ul> 

</body> 

</html> 


代码 运行 结果 如 图 6-13 所 示 。 


让 应 用 口 建议 网 站 


items0 
e。 items1 
e items2 
e items3 
e items4 


图 6-13 


至 于 括号 内 参数 n 的 用 法 与 之 前 的 nth-child 用 法 相同 ， 这 里 不 再 举例 歼 述 。 

(5) :last-child 伪 类 

:last-child 选择 器 匹配 属于 其 父 元 素 的 最 后 一 个 子 元 素 的 每 个 元 素 。 

(6) :nth-last-of-type(n) 伪 类 

:nth-last-of-type(n) 选择 器 匹配 属于 父 元 素 的 特定 类 型 的 第 N 个 子 元 素 的 每 个 元 素 ， 
从 最 后 一 个 子 元 素 开 始 计数 。 

nn 可 以 是 数字 、 关 键 词 或 公式 。 

(7) :nth-last-child(n) 伪 类 

:nth-last-child(n) 选择 器 匹配 属于 其 元 素 的 第 N 个 子 元 素 的 每 个 元 素 ， 不 论 元 素 的 类 
型 ， 从 最 后 一 个 子 元 素 开 始 计数 。 

nn 可 以 是 数字 、 关 键 词 或 公式 。 

p:last-child 等 同 于 p:nth-last-child(1) 
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(8) :only-child 伪 类 
:only-child 选择 器 匹配 属于 


父 元 素 的 唯一 子 元 素 的 每 个 元 素 。 


小 试 身手 : only-child 伪 类 的 使 用 方法 


案例 代码 如 下 : | <li>itemsl</l> 


<li>items2</li> 


y 
ll 


<!DOCTYPE html> 
<html lang="en"> 


<li>items3</li> 


<li>items4</li> 


1 
<head> | 1 
1 <span>items5</span> 
<meta charset="UTF-8"> 1 
| </ul> 
<title>Document</title> | Se 
<style> 1 
2 1 </html> 
p:only-child{ 
color:red; 代码 运行 结果 如 图 6-14 所 示 。 
1 | ES 
span:only-child{ ! D Document x 
color:green; | GC | © file///C/Users/Adminis... 图 女 
} | | 3 gD as 
</style> | items0 
</head> | 
1 e itemsl 
<body> | se items2 
<div> se items3 
1 ® items4 
<p>items0</p> jlemss 
</div> 
<ul> 6-14 


虽然 分 别 对 p 元 素 和 span 元 素 设置 了 文本 颜色 属性 ， 但 是 只 有 Pp 元素 有 效 ， 因 为 p 
元 素 是 div 下 的 唯一 子 元 素 。 

(9) :only-of-type 伪 类 

:only-of-type 选择 器 匹配 属于 其 父 元 素 的 特定 类 型 的 唯一 子 元 素 的 每 个 元 素 。 


小 试 身 手 : only-of-type 伪 类 的 使 用 方法 


案例 代码 如 下 : 
<IDOCTYPE html> 


<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

p:only-of-type{ 
color:red; 

} 

span:only-of-type{ 
color:green; 


} 
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</style> 
</head> 
<body> 

<div> 
<p>items0</p> 
</div> 

<ul> 
<li>items1</li> 
<li>items2</li> 
<li>items3</li> 
<li>items4</li> 
<span>items5</span> 
</ul> 

</body> 
</html> 


代码 运行 结果 如 图 6-15 所 示 。 


[Tg 
GC ©filey//C/Users/Adminis... 图 女 
洪 应 用 口 建议 网 站 


items0 


items1 

items2 

items3 

items4 
items5 


图 6-15 


国 6.2.4 CS53 新 增 UI 元 素 状态 伪 类 


CSS3 新 特性 中 的 UI 元 素 状 态 伪 类 ， 这 一 伪 类 为 表单 元 素 提供 了 更 多 的 选择 。 下 面 讲 
解 这 些 新 增 状 态 伪 类 。 

(1) :checked 伪 类 

:checked 选择 器 匹配 每 个 已 被 选中 的 input 元 素 〈 只 用 于 单 选 按钮 和 复 选 框 ) 。 

(2) :enabled 伪 类 

:enabled 选择 器 匹配 每 个 已 启用 的 元 素 〈 大 多 用 在 表单 元 素 上 ) 。 


小 试 身手 : 为 所 有 已 启用 的 input 元 素 设置 背景 色 


:enabled 伪 类 的 使 用 代码 如 下 : 
<!DOCTYPE html> 


<html lang="en"> 
<meta charset="UTF-8"> 
<title>Document</title> 


<head> 
<style> 


input:enabled 

{ 

background:#ffff00; 

} 

input:disabled 

{ 
background:#dddddd; 
} 

</style> 
</head> 
<body> 
<form action="" 
姓名 : <input type="text" value="Mickey" /><br> 

曾 用 名 : <input type="text" value="Mouse" /><br> 

生日 :<input type="text" disabled="disabled" value="Disneyland" /><br> 
密码 : <input type="password" name="password" /><br> 


> 


<input type="radio" value="male" name="gender" /> Male<br> 
<input type="radio" value="female" name="gender" /> Female<br> 
<input type="checkbox" value="Bike" /> | have a bike<br> 
<input type="checkbox" value="Car" /> | have a car 
</form> 
</body> 
</html> 
代码 运行 结果 如 图 6-16 所 示 。 


D 6-12.html x 

C | © file///C/Users/Administrator/..。 图 女 
应 用 门 建议 网 站 
姓名 : ERA 


曾 用 名 5 
生日 : Bisneyland 


Female 
I have a bike 
I have a car 


(3) :disabled 伪 类 
:disabled 选择 器 选取 所 有 禁用 的 表单 元 素 。 

5 :enabled 用 法 类 似 ， 这 里 不 再 举例 效 述 。 

(4) ::selection 伪 类 

::selection 选择 器 匹配 被 用 户 选取 的 选取 是 部 分 。 


::selection 选择 器 应 用 的 CSS 属性 : color、background、cursor 以 及 outline。 


小 试 身手 : ::selection 伪 类 的 使 用 方法 


案例 代码 如 下 : 
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<!DOCTYPE html> 

<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 

<head> 

<style> 

:selection{ 

color:red; 

1 

</style> 

</head> 

<body> 

<hl> 语 选择 页 面 中 的 文本 </h1> 
<p> 这 是 一 段 文字 </p> 

<div> 这 是 一 段 文字 </div> 

<a href="#"> 这 是 一 段 文字 </a> 
</body> 

</html> 


代码 运行 结果 如 图 6-17 所 示 。 


区 DD Document x WS 
CG © file///C/Users/Administrator/...， 人 广 | } 
党 应 用 口 建议 网 站 


请 选择 页 面 中 的 文本 
这 是 一 段 文字 


这 是 一 段 文字 
这 是 一 段 文字 


图 6-17 


国 6.2.5 《SS3 新 增 属性 


CSS3 中 准备 了 一 些 属性 选择 器 和 目标 伪 类 选择 器 等 ， 下 面 讲解 这 些 新 增 属 性 。 
(1) :target 选择 器 
:target 选择 器 可 用 于 选取 当前 活动 的 目标 元 素 。 


小 试 身手 : 选取 当前 活动 的 目标 元 素 


:target 选择 器 的 案例 代码 如 下 : 
<!DOCTYPE html> 

<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 


<head> 
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<style> 

div{ 

width: 200px; 
height: 200px; 
background: #ccc; 
margin:20px; 

} 

:target{ 
background: #f46; 加 
</style> 

</head> 

<body> 

<h1> 请 点 击 下 面 的 链接 </h1> 

<p><a href="#content1"> 跳 转 到 第 一 个 div</a></p> 
<p><a href="#content2"> 跳 转 到 第 二 个 div</a></p> 
<hr/> 

<div id="content1"></div> 


已 


请 点 击 下 面 的 链接 


<div id="content2"></div> 
</body> 
</html> 


代码 运行 结果 如 图 6-18 所 示 。 


图 6-18 
在 页 面 中 点 击 第 二 个 链接 ， 最 明显 的 显示 就 是 第 二 个 div 产生 了 背景 色 的 改变 。 


(2) :not 选择 器 
:not(selector) 选择 器 匹配 非 指定 元 素 / 选择 器 的 每 个 元 素 。 


小 试 身手 : 匹配 非 指 定 元 素 / 选择 器 的 每 个 元 素 的 方法 
案例 代码 如 下 ; 


<!DOCTYPE html> 

<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 

<head> 

<style> 

:not(p){ 

border:1px solid red; 

} 

</style> 

</head> 

<body> 

<span> 这 是 span 内 的 文本 </span> 
<p> 这 是 第 1 行 p 标签 文本 </p> 
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<p> 这 是 第 2 行 p 标签 文本 </p> 
<p> 这 是 第 3 行 p 标签 文本 </p> 
<p> 这 是 第 4 行 p 标签 文本 </p> 
</body> 

</html> 
代码 运行 结果 如 图 6-19 所 示 。 


/一 一 一 一 [aJ[sISL 3 
区 D Document x Wa 


GC OfileyW/CVUsers/AdministratorDesktop/h5+c3+js/， 困 廊 | } 


图 6-19 


上 面 这 段 代码 选中 了 所 有 的 非 <p> 元 素 ， 所 以 除了 <span> 之 外 ，<body> 和 <html> 
也 被 选中 了 。 

(3) [attribute] 选择 器 

[attribute] 选择 器 用 于 选取 带 有 指定 属性 的 元 素 。 

选中 页 面 中 所 有 带 有 title 属性 的 元 素 ， 并 添加 文本 样式 。 


小 试 身手 : 选取 带 有 指定 属性 的 元 素 的 方法 
案例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 

<head> 

<style> 

[title]{ 

color:red; 

1 

</style> 

</head> 

<body> 

<span title=""> 这 是 span 内 的 文本 </span> 
<p> 这 是 第 1 行 p 标签 文本 </p> 

<p title=""> 这 是 第 2 行 p 标签 文本 </p> 
<p> 这 是 第 3 行 p 标签 文本 </p> 

<p> 这 是 第 4 行 p 标签 文本 </p> 
</body> 

</html> 
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代码 运行 结果 如 图 6-20 所 示 。 
| LIJIEIGT 3 


DD Document x \ 
CG |©file///C/Users/Admi... 图 女 
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这 是 span 内 的 文本 
这 是 第 1 行 p 标 签 文本 
这 是 第 2 行 p 标 签 文本 
这 是 第 3 行 p 标 签 文本 
这 是 第 4 行 p 标 签 文本 
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(4) [attribute~=value] 选择 器 
2 选择 器 用 于 选取 属性 值 中 包含 指定 词汇 的 元 素 。 
选中 所 有 页 面 中 title 属性 带 有 文本 “txt” 的 元 素 。 


小 试 身手 : 选取 属性 值 中 包含 指定 词汇 的 元 素 的 方法 


案例 代码 如 下 : 


<!DOCTYPE html> 


<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 

<head> 

<style> 

[title~=txt]{ 

color:red; 

b 

</style> 

</head> 

<body> 

<span title="txt"> 这 是 span 内 的 文本 </span> 
<p> 这 是 第 1 行 p 标签 文本 </p> 

<p title="my txt"> 这 是 第 2 行 p 标签 文本 </p> 
<p> 这 是 第 3 行 p 标签 文本 </p> 

<p> 这 是 第 4 行 p 标签 文本 </p> 

</body> 

</html> 


代码 运行 结果 如 图 6-21 所 示 。 


I@ 
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这 是 span 内 的 文本 


这 是 第 1 行 p 标 签 文本 
这 是 第 2 行 p 标 签 文本 
这 是 第 3 行 p 标 签 文本 
这 是 第 4 行 p 标 签 文本 


图 6-21 


| 53 课堂 练习 | 


本 节 的 课堂 练习 为 大 家 准备 了 如 图 6-22 所 示 的 效果 ， 请 根据 本 章 学 习 的 知识 做 出 相 


同 的 效果 。 
© | © filey//C/Users/Admi.. 女 
图 6-22 
6-22 所 示 的 效果 代码 如 下 : 


<!IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 课堂 练习 </title> 
<style> 
input[type="radio"]{display: none;} 
label{display: inline-block;width: 
24px;height: 24px; 
border-radius: 50%;border: 1px solid 
#ccc;margin: Spx;} 
:checked + label{background: #00b3ee;} 
</style> 
</head> 
<body> 


<input type="radio" name = "fruit" id = 
"check1"/> 
<label for="check1"></label> 
<input type="radio" name = "fruit" id = 
"check2"/> 
<label for="check2"></label> 
<input type="radio" name = "fruit" id = 
"check3"/> 
<label for="check3"></label> 
<input type="radio" name = "fruit" id = 
"check4"/> 
<label for="check4"></label> 
</body> 
</html> 


在 网 页 设计 中 ， 表 单 的 作用 是 很 大 的 ， 


除 负 责 数 据 采 集 外 ， 精 心 设计 的 表单 还 能 
让 用 户 心情 舒畅 ， 从 而 愉快 地 注册 、 付 款 
或 进行 内 容 创建 和 管理 。 本 节 的 强化 练习 
是 利用 CSS 创建 一 个 表单 。 


表单 的 设计 效果 如 图 6-23 所 示 。 


操作 提示 : 


部 分 HTML 代码 如 下 : 

<fieldset> 

<legend> 用 户 详 细 资 料 </legend> 

<ol> 

<li> 

<label for=name> 用 户 名 称 : </label> 
<input id=name name=name type=text 
placeholder=" 语 输入 用 户 名 "required 
autofocus> 

</li> 

<li> 

<label for=email> 邮件 地 址 ，</label> 
<input id=email name=email type=email 
placeholder="example@163.com" 
required> 

</li> 

<li> 

<label for=phone> 联系 电话 : </label> 
<input id=phone name=phone type=tel 
placeholder="010-12345678" required> 
</li> 

</ol> 


</fieldset> 
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CSS 提示 代码 如 下 : 
body{ 
background: #ffffff; 
color: #111111; 


font-family: Georgia, "Times New Roman", 


Times, serif; 
padding-left: 20px; 

} 

form#payment { 
background: #9cbc2c; 
-webkit-border-radius: 5px; 
border-radius: Spx; 
padding: 20px; 

width: 400px; 
margin:auto; 

} 

form#payment fieldset { 
border: none; 
margin-bottom: 10px; 


} 


此 练习 也 是 关于 表单 的 练习 ， 因 为 在 设计 网 页 时 表单 出 现 的 次 数 最 多 ， 且 样式 也 较 多 


样 化 ， 只 有 掌握 了 CSS3 的 新 样式 才能 做 出 更 漂亮 的 网 页 。 


未 章 结束 语 
[ | 


本 章 主要 讲述 了 CSS 的 基础 知识 ， 


回顾 了 CSS 的 特点 和 基本 语法 ， 讲 述 了 CSS 的 选 


择 器 和 数值 单位 ， 这 些 都 是 为 CSS3 做 铺垫 ， 本 章 的 重点 知识 是 CSS3 的 一 些 新 增 属性 和 


元 素 伪 类 等 重要 知识 点 。 
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知识 导 图 : 


设计 动画 


(Cl 
CSS3 设计 动画 


SUMMARY 


CSS3 动画 又 是 一 个 颠覆 性 的 技术 ， 之 前 想 要 在 网 页 中 实现 动画 效 
果 总 是 需要 JavaScript 或 者 Flash 插件 的 帮助 ， 但 是 CSS3 动画 
无 需 我 们 再 使 用 较 复杂 的 JavaScr ipt 或 者 是 非常 占 资 源 的 Flash 
插件 了 。 本 章 将 讲解 CSS3 动画 的 知识 。 


[三 

了 解 浏览 器 对 CSS3 过 渡 属性 的 支持 情况 。 
掌握 单项 和 多 项 过 渡 属性 。 

了 解 浏览 器 对 CSS3 动画 属性 的 支持 情况 。 
能 够 单独 完成 一 个 动画 效果 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时 。 


过 渡 属 性 
单项 属性 过 渡 
CSS3 过 渡 
多 项 属性 过 渡 
浏览 器 的 支持 情况 
动画 属性 
CSS3 动画 实现 动画 效果 


制作 一 个 动画 
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| 7.1 过渡 基础 | 


所 谓 过 渡 就 是 某 个 元 素 从 一 种 状态 到 另 一 状态 的 过 程 。CSS3 的 过 渡 指 的 是 页 面 中 的 
元 素 从 开始 状态 改变 成 另外 一 种 状态 的 过 程 。CSS3 中 的 transition 属性 提供 了 非常 便捷 的 
过 渡 方 式 ， 从 而 不 需要 借助 其 他 插件 就 能 完成 。 


图 7.1.1 过 渡 属性 


CSS3 有 很 多 过 渡 属 性 , 这 些 属性 丰富 了 过 渡 的 效果 和 能 力 以 及 创作 的 自由 度 , 如 表 7-1 所 示 。 
表 7-1 CSS3 中 所 有 的 过 渡 金 
Transition 简写 属性 ， 用 于 在 一 个 属性 中 设置 四 个 过 渡 属 性 
transition-property 规定 应 用 过 渡 的 CSS 属性 的 名 称 


定义 过 渡 效 果 花 费 的 时 间 。 
规定 过 渡 效 果 的 时 间 曲 线 。 默 认 是 ease 
规定 过 流 效果 何 时 开始 。 默 认 是 0 


表 7-1 中 的 transition-timing-function 属性 其 实 就 是 规定 用 户 想 要 的 动画 方式 ， 它 的 值 


可 以 是 以 下 几 种 : 

@ linear 规定 以 相同 速度 开始 至 结束 的 过 渡 效 果 ( 等 于 cubic- 
bezier(0,0,1,1)) 。 

e@ ease: 规定 慢 速 开始 ， 逐 渐变 快 ， 然 后 慢 速 结束 的 过 渡 效 果 (cubic- 
bezier(0.25,0.1,0.25.1)) 

@ ease-in: 规定 以 慢 速 开始 的 过 渡 效 果 ( 等 于 cubic-bezier(0.42,0,1,1))。 

@ ease-out: 规定 以 慢 速 结束 的 过 渡 效 果 〈( 等 于 cubic-bezier(0.0.0.58.1)) 。 

@ ease-in-out: 规定 以 慢 速 开始 和 结束 的 过 渡 效 果 ( 等 于 cubic- 
bezier(0.42.0,0.58,1)) 。 

@ cubic-bezier(n,n,n,n): 在 cubic-bezier 函数 中 定义 自己 的 值 。 可 能 的 值 是 
0 至 1 之 间 的 数值 。 

e@ 表 7-1 中 的 transition-delay 属性 表示 的 是 过 渡 的 延迟 时 间 ，0 代表 没有 延 
迟 ， 立 即 执行 。 


国 7.1.2 浏览 器 支持 情况 
目前 CSS3 的 过 渡 必 性 浏览 器 支持 情况 已 经 很 好 了 ， 绝 大 多 数 浏览 器 都 能 够 支持 


CSS3 过 渡 ， 表 7-2 就 是 目前 各 大 浏览 器 厂商 对 CSS3 过 渡 的 支持 情况 。 
注 : 表 中 的 数字 表示 支持 该 属性 的 第 一 个 浏览 器 版 本 号 。 


紧 跟 在 -webkit-, -ms- 或 -moz- 前 的 数字 为 支持 该 前 级 属性 的 第 一 个 浏览 器 版 本 号 。 
表 7-2 各 大 浏览 器 厂商 对 CSS3 过 渡 的 支持 情况 


属性 Chrome IE Firefox Safrai Opera 
transition 26.0.0-webkit- 10.0 16.04.0-moz- | 6.13.1-webkit- 12.110.5-0- 
transition-dela 26.04.0-webkit- | 10.0 16.04.0-moz- | 6.13.1-webkit- 12.110.5-o- 


transition-duration 26.04.0-webkit- 16.04.0-moz- | 6.13.1-webkit- 
transition-property 26.04.0-webkit- | 10.0 16.04.0-moz- | 6.13.1-webkit- 
| 区 16.04.0-moz- | 6.13.Lwebkit | 12.110.5-o- 
function 
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Sp Tt 

[7.2 实现 过 渡 | 

想 要 实现 过 渡 效 果 ， 就 需要 了 解 过 渡 是 如 何 工作 的 ， 了 解 了 它 的 工作 原理 之 后 再 来 使 
用 它 就 轻而易举 了 ,CSS3 过 渡 是 元 素 从 一 种 样式 逐渐 改变 为 另 一 种 的 效果 。 要 实现 这 一 点 ， 
必须 规定 两 项 内 容 : 指定 要 添加 效果 的 CSS 属性 ; 指定 效果 的 持续 时 间 。 
图 7.2.1 单项 属性 过 渡 

先 做 一 个 简单 的 单项 属性 过 渡 的 案例 ， 建 立 一 个 div， 然 后 为 其 添加 transition 属性 ， 
紧 接 着 在 transition 属性 的 值 里 面 写 入 想 要 改变 的 属性 和 改变 时 间 即 可 。 
小 试 身手 : 设置 鼠标 划 过 时 元 素 运 动 500px 

设置 单项 属性 过 渡 的 代码 如 下 : 


<!DOCTYPE html> 1 </head> 
<html lang="en"> 


<body> 

<head> ! <div class="d1"></div> 
<meta charset="UTF-8"> | <div class="d2"></div> 
<title>Document</title> | <div class="d3"></div> 
<style> </body> 

div{ | </html> 

‘width: 200px; ! 
height: 200px; 
transition:width 2s; om 
) ss 
d1{ | 
background: pink; 

国 

.d2{ 

background: lightblue; 
J 

.d3{ 

background: lightgreen; 
} 

div:hover{ 

width: 500px' 

1 

</style> 


代码 运行 结果 如 图 7-1 所 示 。 


国 7.2.2 多 项 属性 过 渡 


与 单项 属性 过 渡 类 似 的 是 ， 多 项 属性 过 渡 其 实 也 是 一 样 的 工作 原理 ， 只 是 在 写法 上 略 
有 不 同 ， 多 项 属性 过 渡 的 写法 就 是 在 写 完 第 一 个 属性 和 过 渡 时 间 之 后 ， 随 后 无 论 添加 多 少 
个 变化 的 属性 ， 都 是 在 逗号 后 直接 再 次 写 入 过 渡 的 属性 名 和 过 渡 时 间 。 
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还 有 个 一 劳 永 逸 的 方法 就 是 直接 使 用 关键 字 all 表示 所 有 属性 都 会 应 用 过 渡 ， 这 样 
写 有 时 会 有 危险 。 例 如 : 想 要 第 1、2、3 种 属性 应 用 过 渡 效 果 ， 但 是 第 4 种 属性 不 要 应 
上 过 渡 效 果 ， 因 为 之 前 使 用 的 是 关键 字 all 就 无 法 取消 了 ， 所 以 使 用 关键 字 all 时 需 


小 试 身手 : 让 元 素 运动 时 颜色 也 发 生 改变 


多 项 属性 过 渡 示 例 代码 如 下 : 


<!DOCTYPE html> } 

<html lang="en"> span{ 
<head> display:block; 
<meta charset="UTF-8"> width: 100px; 


<title>Document</title> height: 100px; 


<style> | background: red; 
div{ | transition:all 2s; 
width: 100px; ! margin:10px; 
height: 100px; | } 
margin:10px; | span:hover{ 
transition:width 2s,background 2s; | width: 600px; 
} | background: blue; 
div:hover{ | } 
width: 500px; | </style> 
background: blue; | </head> 
} | <body> 
.dl1{ | <div class="d1"></div> 
background: pink; | <div class="d2"></div> 
} | <div class="d3"></div> 
.d2{ | <span></span> 
background: lightblue; | <span></span> 
} | <span></span> 
.d3{ ! </body> 
background: lightgreen; | </html> 

图 7-3 所 示 。 


代码 运行 结果 如 图 7-2、 
f = 加 | 
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图 7.2.3 利用 过 渡 设 计 电 脑 桌面 


使 用 之 前 学 过 的 关于 CSS3 的 知识 来 模拟 实现 苹果 桌面 下 方 DOCK 的 缩放 特效 ， 这 也 
是 对 CSS3 转换 和 CSS3 过 渡 的 一 个 小 的 总 结 。 本 案例 中 使 用 了 divt+css 布局 等 知识 。 


小 试 身手 : 制作 流行 的 显示 桌面 


过 渡 的 实际 应 用 的 代码 如 下 : 


<!DOCTYPE html> 
<htmllang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>transition 样式 3</title> 

<style type="text/css"> 

body{ 

background:url( “风景 .jpg') no-repeat; 
background-size: 100% 1020px;/*100% 
768px*/ 

} 

#dock{ 

width: 100%; 
bottom: 10px; 


position: fixed; 
text-align: 
center; 

} 

ul{ 

padding: 0; 

margin: 0; 

list-style-type: none; 

} 

ullif 

display: inline-block; 

width: 50px; 

height: 50px; 


transition: margin ls linear; 


} 
放 妃 标 移 上 去 时 的 变化 */ 
ulli:hover{ 


margin-left: 25px; 
margin-right: 25px; 
/*z-index: 999;*/ 


| 
ulliimg{ 
width: 100%; 


height: 100%; 


transition: transform 1s linear; 
transform-origin: bottom center; 

} 

ullispan{ 

display: none; 

height:80px; 

vertical-align: top; 

text-align: center; 

font:14px 宋体 ; 

color:#ddd; 

} 

/* 鼠标 移 上 去 时 图 标的 变化 ， 放 大 */ 

ul li:hover img{ 

transform: scale(2, 2); 

} 

ul li:hover span{ 

display: block; 

i 

</style> 

</head> 

<body> 

<divid="dock"> 

<ul> 

<li><span>ASTY</span><img src="img/ 
as.png"></li> 
<li><span>Google</span><img src="img/ 
google.png" alt=""></li> 
<li><span>Inst</span><img src="img/ 
in.png" alt=""></li> 
<li><span>Nets</span><img src="img/nota. 
png" alt=""></li> 
<li><span>Zurb</span><img src="img/zurb. 
png" alt=""></li> 
<li><span>FACE</span><img src="img/ 
facebook.png" alt=""></li> 


<li><span>OTH</span><img src="img/ 
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as.png" alt=""></li> 

<li><span>UYTR</span><img src="img/in.png" alt=""></li> 
</ul> 

</div> 

</body> 

</html> 


代码 运行 结果 如 图 7-4 所 示 。 


S$@MMD 4m 


图 7-4 


| 7.3 ”实现 动画 | 


CSS3 属性 中 有 关于 制作 动画 的 三 个 属性 : Transform,Transition,Animation。 前 面 学 习 
Transform 和 Transition， 对 元 素 实现 了 一 些 基 本 的 动画 效果 ， 但 是 这 些 还 不 能 满足 需求 ， 
它们 都 需要 触发 条 件 才 能 够 表现 出 动画 的 效果 。 本 节 所 要 学 习 的 动画 可 以 不 需要 触发 即 互 
实现 动画 效果 。 

Animation 和 canvas 不 同 的 是 ，Animation 是 一 个 CSS 属性 ， 只 能 作用 于 页 面 中 已 经 存 
在 的 元 素 上 ， 而 不 是 像 在 canvas 中 一 样 可 以 在 画布 中 呈现 动画 效果 。 

想 要 使 用 Animation 动画 需要 先 了 解 @keyframes，(@keyframes 的 意思 是 “关键 帧 ”。 
在 Flash 中 使 用 动画 涉及 关键 帧 的 概念 ，CSS3 中 的 @keyframes 也 是 如 此 。 

CSS3 动画 的 解释 : 

@ 动画 是 使 元 素 从 一 种 样式 逐渐 变化 为 另 一 种 样式 的 效果 。 

@ 可 以 改变 任意 多 的 样式 、 任 意 多 的 次 数 。 

@ 请 用 百分比 来 规定 变化 发 生 的 时 间 ， 或 用 关键 词 fom 和 to， 等 同 于 0% 
和 100%。 

e@ 0% 是 动画 的 开始 ，100% 是 动画 的 完成 。 

@ 为 了 得 到 最 佳 的 浏览 器 支持 ， 应 该 始终 定义 0% 和 100% 选择 器 。 


国 7.3.1 浏览 器 支持 情况 
作为 CSS3 中 的 新 增 属 性 ， 需 要 了 解 其 浏览 器 支持 情况 。 从 目前 来 看 ，CSS3 动画 的 
支持 情况 还 算 理 想 ， 绝 大 多 数 浏览 器 都 已 完全 支持 CSS3 动画 了 。 只 有 正 支持 的 较 晚 ， 


=: 
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是 从 正 10 版 本 开始 真正 支持 animation 属性 ， 各 大 浏览 器 厂商 对 CSS3 动画 的 支持 情况 ， 


如 表 7-3 所 示 。 


表 7-3 各 大 浏览 器 厂商 对 CSS3 动画 的 支持 情况 


Chrome Firefox SAFRAI Opera 
43.04.0-webkit- 16.05.0-moz- | 9.04.0-webkit- | 30.015.0-webkit-12.0-0- 


animation 43.04.0-webkit- | 10.0 | 16.05.0-moz- | 9.04.0-webkit- | 30.015.0-webkit-12.0-0- 
注 : 表 7-3 中 的 数字 表示 支持 该 属性 的 第 一 个 浏览 器 版 本 号 。 
紧 跟 在 -webkit-, -ms- 或 -moz- 前 的 数字 为 支持 该 前 级 属性 的 第 一 个 浏览 器 版 本 号 。 


国 7.3.2 动画 属性 
想 要 设计 好 动画 就 要 了 解 其 属性 ， 下 面 讲解 动画 的 属性 。 
(1) @keyframes 
如 果 想 要 创建 动画 ， 就 必须 使 用 @keyframes 规则 。 
@ 创建 动画 是 通过 逐步 改变 从 一 个 CSS 样式 设 定 到 另 一 个 。 
@ 在 动画 过 程 中 ， 可 以 多 次 更 改 CSS 样式 的 设 定 。 
e@ 指定 的 变化 发 生 时 使 用 % ， 或 关键 字 from 和 to， 这 和 0% 到 100% 相 同 。 
e@ 0% 是 开头 动画 ，100% 是 当 动 画 完成 。 
@ 为 了 获得 最 佳 的 浏览 器 支持 ， 应 该 始终 定义 为 0% 和 100% 的 选择 器 。 
(2) animation 
除了 animation-play-state 属性 以 外 ， 它 是 所 以 动画 属性 的 简写 属性 。 
语法 描述 : 
animation: name duration timing-function delay iteration-count direction fill-mode play- 


state; 

(3) animation-name 

animation-name 属性 为 @keyframes 动画 规定 名 称 。 

语法 描述 : 

animation-name: keyframenamelnone; 

语法 解释 : 
@ Keyframename: 规定 需要 绑 定 到 选择 器 的 keyframes 的 名 称 。 
@ None: 规定 无 动画 效果 〈 可 用 于 覆盖 来 自 级 联 的 动画 ) 。 

(4) animation-duration 

animation-duration 属性 定义 动画 完成 一 个 周期 需要 多 少 秒 或 毫秒 。 

语法 描述 : 


animation-duration: time; 


(5) animation-timing-function 

animation-timing-finction 指定 动画 将 如 何 完成 一 个 周期 。 
速度 曲线 定义 动画 从 一 套 CSS 样式 变 为 另 一 套 所 用 的 时 间 。 
速度 曲线 用 于 使 变化 更 为 平滑 。 

语法 描述 : 

animation-timing-function: value; 

animation-timing-function 使 用 的 数学 函数 ， 称 为 三 次 贝 塞 尔 曲 线 ， 即 速度 曲 
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此 函数 ， 可 以 使 用 自己 的 值 或 预先 定义 的 值 之 一 。 
animation-timing-function 属性 的 值 可 以 是 以 下 几 种 : 
@ inear: 动画 从 头 到 尾 的 速度 是 相同 的 。 
@ ease: 上 默认， 动画 以 低速 开始 ， 然 后 加 快 ， 在 结束 前 变 慢 。 
@ ease-in: 动画 以 低速 开始 。 
@ ease-out: 动画 以 低速 结束 。 
@ 
®. 


ease-in-out: 动画 以 低速 开始 和 结束 。 
cubic-bezier(n,n,n,n): 在 cubic-bezier 函数 中 自己 的 值 。 可 能 的 数值 是 从 
0 到 1。 
(6) animation-delay 
animation-delay 属性 定义 动画 什么 时 候 开 始 。 
它 的 值 的 单位 可 以 是 秒 〈s) 或 毫秒 (ms) 。 
(7) animation-iteration-count 
animation-iteration-count 属性 定义 动画 应 该 播放 多 少 次 ， 默 认 值 为 1。 
animation-iteration-count 属性 的 值 可 以 有 以 下 两 种 : 
@ n: 一 个 数字 ， 定 义 应 该 播放 多 少 次 动画 。 
@ ”infinite: 指定 动画 应 该 播放 无 限 次 《〈 永 远 ) 。 
(8) animation-direction 
规定 动画 是 否 在 下 一 周期 逆向 地 播放 。 默 认 是 normal。 
animation-direction 属性 定义 是 否 循环 交 蔡 反 向 播放 动画 。 
如 果 动 画 被 设置 为 只 播放 一 次 ， 该 属性 将 不 起 作 
语法 描述 : 
animation-direction: normallreverselalternatelalternate-reverselinitiallinherit; 
animation-direction 属性 的 值 可 以 是 以 下 几 种 : 
@ normal: 默认 值 。 动 画 按 正常 播放 。 
@ Reverse: 动画 反 向 播放 。 
@ altemate: 动画 在 奇数 次 (1、3、5.…) 正 向 播放 ， 在 偶数 次 (2、4、6.…) 


反 向 播放 。 
@ altermate-reverse: 动画 在 奇数 次 (1、3、5.…) 反 向 播放 ， 在 偶数 次 〈2、 
4、6...) 正 向 播放 。 


e Initial: 设置 该 属性 为 它 的 默认 值 。 

e@ Inherit， 从 父 元 素 继承 该 属性 。 

(9) animation-play-state 
规定 动画 是 否 正在 运行 或 暂停 ， 默 认 是 running。 
animation-play-state 属性 指定 动画 是 否 正在 运行 或 已 暂停 。 
语法 描述 : 
animation-play-state: pausedlrunning; 
animation-play-state 属性 的 值 可 以 是 以 下 两 种 : 
@ paused: 指定 暂停 动画 。 

@ ”running: 指定 正在 运行 的 动画 。 
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图 7.3.3 ”实现 动画 效果 


要 创建 CSS3 动画 ， 就 不 得 不 了 解 @keyframes 规则 。 
@Kkeyframes 规则 是 创建 动画 。 在 @keyframes 规则 内 指定 一 个 CSS 样式 和 动画 ， 并 


将 逐步 从 目前 的 样式 更 改 为 新 的 样式 。 


当 在 @keyframes 中 创建 动画 ， 把 它 绑 定 到 一 个 选择 器 ， 否 则 动画 不 会 有 任何 效果 。 
指定 至 少 这 两 个 CSS3 的 动画 属性 绑 定 一 个 选择 器 : 规定 动画 的 名 称 ; 规定 动画 的 


时 长 ， 下 面 通过 一 个 实例 来 帮助 理解 CSS3 动画 。 


小 试 身手 : @keyframes 规则 的 实际 应 用 


制作 动画 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 


@keyframes myAni{ 

0%{margin-left: Opx;background: blue;} 
50%{margin-left: 500px;background: red;} 
100%{margin-left: Opx;background: blue;} 


<title>Document</title> } 
<style> </style> 
div{ </head> 
width: 200px; <body> 
height: 200px; <div></div> 
background: blue; </body> 
animation:myAni 5s; </html> 
} 
代码 运行 结果 如 图 7-5 所 示 。 
[BJISIEL EJ 
DD Document x \S 
| © fileV//DVDocuments/ 丰 全 名 站 点 %202/Untitled-Lhtml 中 女 | 了 
洪 应 用 癌 建议 网 站 


再 看 一 个 案例 ， 这 次 让 元 素 旋 转 起 来 。 


小 试 身手 : 使 用 @keyframes 规则 让 元 素 旋转 


代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 


<head> 


<meta charset="UTF-8"> 
<title>Document</title> 

<style> 

.dl1{ 

width: 200px; 

height: 200px; 

background: blue; 

animation:myFirstAni 5s; 

transform: rotate(0deg); 

margin:20px; 

} 

@keyframes myFirstAni{ 
0%{margin-left: Opx;background: 
blue;transform: rotate(Odeg);} 
50%{margin-left: 500px;background: 
red;transform: rotate(720deg);} 
100%{margin-left: Opx;background: 
blue;transform: rotate(Odeg);} 

} 

.d2{ 

width: 200px; 


代码 运行 结果 如 图 7-6 所 示 。 


[DY Document x 
©lal 
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height: 200px; 

background: red; 

animation:mySecondtAni 5s; 

transform: rotate(0deg); 

margin:20px; 

} 

@keyframes mySecondtAni{ 
0%{margin-left: Opx;background: 
red;transform: rotateY(Odeg);} 
50%{margin-left: 500px;background: 
blue;transform: rotateY(720deg);} 
100%{margin-left: Opx;background: 
red;transform: rotateY(Odeg);} 

} 

</style> 

</head> 

<body> 

<div class="d1"></div> 

d2"></div> 


<div class= 
</body> 
</html> 


ET 三 ] 画 ] 到 
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本 章 的 课堂 练习 准备 了 一 个 在 网 页 缓存 时 出 现 的 经 典 动画 一 Loading， 效 果 如 图 7-7 


所 示 。 
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中 篇 单 的 Loading 动 画 


CG © filey//C/Users/Administr... 


7-7 所 示 的 效果 代码 如 下 : 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 简单 的 Loading 动画 </title> 
<style type="text/css"> 
body{ 
background: #a0a0a0; 
} 
‘loader{ 
margin: 100px auto 0; 
} 
作为 了 和 刚才 那些 没 用 的 css 区 分 开 来 ， 
不 要 混 到 一 起 影响 视线 ， 
单独 写 在 一 个 选择 器 里 面 */ 
.loader{ 
border: solid 12px #ddd; 
border-left-color: #167ede; 
border-radius: 50%; 
height: 120px; 
width: 120px; 
-webkit-animation: simple-loader 1.1s 


infinite linear; 
animation: simple-loader 1.1s infinite 
linear; 


J 
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@-webkit-keyframes simple-loader{ 
0%1 
-webkit-transform: rotate(0deg); 
transform: rotate(0deg); 
} 
100%{ 
-webkit-transform: rotate(360deg); 
transform: rotate(360deg); 
日 
上 
@keyframes simple-loader{ 
oO%{ 
-webkit-transform: rotate(Odeg); 
transform: rotate(0deg); 
} 
100%{ 
-webkit-transform: rotate(360deg); 
transform: rotate(360deg); 
} 
} 
</style> 
</head> 
<body> 
<div class="loader"></div> 
</body> 
</html> 


强化 训练 


本 章 的 强化 练习 为 大 家 准备 了 当 鼠 标 放 到 医 


片上 时 ， 图 片 自动 放大 的 效果 。 


网 


网 


7-9 所 示 的 是 鼠标 放 到 图 片上 的 效果 。 


7-8 所 示 的 是 鼠标 没有 放 到 图 片上 的 效果 。 
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图 7-8 


操作 提示 : 
代码 如 下 : 


<!IDOCTYPE html> 
<html> 

<head> 

<meta charset="UTF-8"> 
<title></title> 

<style type="text/css"> 
div{ 

width: 300px; 

height: 300px; 

border: #000 solid 1px; 
margin: 50px auto; 
overflow: hidden; 


} 


| 本 章 结束 语 | 


本 章 主 要 讲解 了 CSS3 中 的 过 渡 属 性 和 动画 属性 ， 包 括 了 实现 简单 的 单项 过 渡 以 及 苹 
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div img{ 

cursor: pointer; 
transition: all 0.6s; 

} 

div img:hover{ 
transform: scale(2.3); 
</style> 

</head> 

<body> 

<div> 

<img src="tupian.png" /> 
</div> 

</body> 

</html> 


果 桌 面 的 模拟 和 制作 动画 太阳 系 。CSS3 的 过 渡 功能 使 得 开发 者 对 Web 的 开发 更 加 方便 ， 


技术 瓶颈 和 壁垒 更 少 。 有 了 这 一 颠覆 性 的 新 技术 ， 前 端 开 发 工作 者 直接 使 用 CSS 即 可 完 


成 动画 操作 。CSS 不 是 编程 语言 ， 而 是 样式 语言 ， 写 CSS 时 不 需要 逻辑 运算 。 


六 


全 
多 彩 的 样式 设计 


SUMMARY 


CSS3 新 特性 带 来 了 新 的 文本 样式 ， 这 些 文本 样式 为 页 面 中 的 文本 
带 来 了 新 的 活力 ， 使 其 显得 更 加 生动 多 彩 。 通 过 CSS3， 还 能 

创建 圆 角 边框 ， 向 矩形 添加 阴影 ， 使 用 图 片 来 绘制 边框 ， 且 不 需 
使 用 设计 软件 ， 比 如 PhotoShop。 本 章 将 讲解 有 关 CSS3 边框 的 知 


识 。 


男 学 习 目 标 

掌握 文本 的 样式 ， 其 中 包括 文本 的 阴影 、 溢 出 、 换 行 等 。 
学 习 盒子 阴影 的 使 用 方法 。 

掌握 设计 颜色 样式 的 方法 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时 。 


知识 导 图 : 文本 阴影 text-shadow 


文本 溢出 text-overflow 

文本 换行 word-wrap 

单词 拆 分 word-break 

圆 角 边 框 border-radius 
CSS3 文本 与 颜色 盒子 阴影 box-shadow 

使 用 RGBA 颜色 值 

使 用 HSL 颜色 值 

使 用 HSLA 颜色 值 


| 8.1 设置 多 彩 的 文本 样式 | 


在 网 页 中 ， 文 本 样式 也 能 够 突出 网 页 设计 的 风格 ， 一 个 好 的 网 页 设计 也 必然 离 不 开 文 
本 和 一 些 边框 的 酷 炫 样式 ， 下 面 讲解 如 何 进行 设置 。 


国 3.1.1 设置 文本 阴影 


在 text-shadow 还 没有 出 现时 ， 设 计 网 页 中 的 阴影 一 般 都 是 用 Photoshop， 现 在 有 了 
CSS3， 便 可 以 直接 使 用 text-shadow 属性 来 指定 阴影 。 这 个 属性 有 两 个 作用 ， 产 生 阴 影 和 
模糊 主体 。 这 样 在 不 使 用 图 片 时 也 能 给 文字 增加 质感 。 

text-shadow 属性 向 文本 设置 阴影 。 

text-shadow 属性 向 文本 添加 一 个 或 多 个 阴影 。 该 属性 是 逗号 分 隔 的 阴影 列表 ， 每 个 
阴影 用 2 个 或 3 个 长 度 值 和 一 个 可 选 的 颜色 值 进行 规定 。 省 略 的 长 度 是 0。 

text-shadow 属性 拥有 4 个 值 ， 它 们 按照 顺序 排列 分 别 是 : 

@ h-shadow: 必需 。 水 平 阴影 的 位 置 。 允 许 负 值 。 

@ v-shadow: 必需 。 垂 直 阴 影 的 位 置 。 人 允许 负 值 。 

e@ Blur: 可 选 。 模 糊 的 距离 。 

@ Color: 可 选 。 阴 影 的 颜色 。 

通过 一 个 案例 来 帮助 理解 text-shadow 属性 。 


小 试 身手 : 设置 文本 的 各 种 阴影 效果 
文本 右 下 角 阴影 的 设置 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 


<meta charset="UTF-8"> 
<title>Document</title> 
<head> 

<style> 

p{ 

text-align:center; 

font:bold 50px Helvetica, arial, sans-serif; 
color:#999; 

text-shadow:0.1em 0.1em #333; 
} 

</style> 

</head> 

<body> 

<p> 德 胜出 品 </p> 

</body> 

</html> 


代码 的 运行 效果 如 图 8-1 所 示 。 
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图 8-1 


text-shadow:0.1em 0.1em #333; 此 段 代码 声明 了 右 下 角 文本 阴影 效果 ， 如 果 把 投影 设 
置 到 左上 角 ， 则 按照 下 面 的 方法 设置 ， 示 例如 下 : 


<style type="text/css"> 

p{ 

text-shadow:-0.1em -0.1em #333; 
y 

</style> 


代码 的 运行 效果 如 图 8-2 所 示 。 
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8-2 
同 理 ， 如 果 在 文本 左下 角 设置 阴影 ， 则 可 以 设置 如 下 样式 ， 示 例 代 码 如 下 : 
<style type="text/css"> 
p{ 
text-shadow:-0.1em 0.1em #333; 
加 
</style> 


代码 的 运行 效果 如 图 8-3 所 示 。 
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图 8-3 


也 可 以 增加 模糊 效果 的 阴影 ， 示 例 代 码 如 下 : 


<style type="text/css"> 

p{ 

text-shadow: 0.1em 0.1em 0.3em #333; 
</style> 


代码 的 运行 效果 如 图 8-4 所 示 。 
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8-4 
如 果 想 要 定义 模糊 阴影 效果 ， 示 例 代 码 如 下 : 
<style type="text/css"> 
p{ 
text-shadow: 0.1em 0.1em 0.2em green; 


} 
</style> 


代码 的 运行 效果 如 图 8-5 所 示 。 
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text-shadow 属性 的 第 一 个 值 表 示 水 平 位 移 ， 第 二 个 值 表 示 垂 直 位 移 ， 
正 值 为 右 或 者 偏 下 ， 负 值 为 偏 左 或 偏 上 ， 第 三 个 值 表 示 模 糊 半 径 ， 该 值 可 选 ， 
第 四 个 值 表示 阴影 的 颜色 ， 该 值 可 选 。 在 阴影 偏 移 之 后 ， 可 以 指定 一 个 模 
糊 半 径 。 模 糊 半 径 是 一 个 长 度 值 ， 指 出 模糊 效果 的 范围 。 计 算 模糊 效果 的 
具体 方法 并 没有 指定 。 在 阴影 效果 的 长 度 值 之 前 或 之 后 可 以 选择 指定 一 个 
颜色 值 。 颜 色 值 是 阴影 效果 的 基础 。 如 果 没 有 指定 颜色 ， 就 使 用 color 属性 
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结合 实例 进行 介绍 。 


(1) 通过 阴影 增加 前 景色 与 背景 色 的 对 比 度 
小 试 身手 : 通过 设置 阴影 让 文字 更 突出 


灵活 使 用 text-shadow 属性 ， 可 以 解决 网 页 设计 中 很 多 实际 问题 ， 下 面 


在 这 个 示例 中 ， 通 过 阴影 把 文字 颜色 与 背景 颜色 区 分 开 来 ， 让 字体 看 起 来 更 清晰 ， 代 


码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 

<head> 

<style> 

p{ 

text-align:center; 

font:bold 50px helvetica, arial, sans-serif; 
color:#fff; 

text-shadow:#999 0.1em 0.1em 0.2em; 
} 

</style> 

</head> 

<body> 

<p> 德 胜 之 家 </p> 

</body> 

</html> 


代码 的 运行 效果 如 图 8-6 所 示 。 


(2) 定义 多 色 阴影 


text-shadow 属性 可 以 接受 一 个 以 逗号 分 隔 的 阴影 效果 列表 , 并 应 用 到 该 元 素 的 文本 上 。 


月 影 效果 不 会 改变 边框 的 尺寸 ， 但 可 能 延伸 到 它 的 边界 之 外 。 阴 影 效果 的 堆 对 
层次 是 一 样 的 。 


月 影 效 果 按照 给 定 的 顺序 应 用 ， 因 此 有 可 能 出 现 互相 覆盖 ， 但 是 它们 不 会 覆盖 文本 本 身 ， 


层次 和 本 身 


小 试 身手 : 多 重 阴影 颜色 效果 


为 红色 文本 定义 3 个 不 同 颜色 的 阴影 ， 示 例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 

<head> 

<style> 

p{ 

text-align:center; 

font:bold 50px helvetica, arial, sans-serif; 
color:red; 

text-shadow: 0.2em 0.4em 0.1em #600, 
-0.3em 0.1em 0.1em #060, 

0.4em -0.3em 0.1em #006; 

} 

</style> 

</head> 

<body> 

<p>HTML5+CSS3</p> 

</body> 

</html> 


代码 的 运行 效果 如 图 8-7 所 示 。 


&i[lo[el | 


D Document x 


GC © filey//C/Users/Adminis... 公 


当 使 用 text-shadow 属性 定义 多 色 阴 影 时 ， 每 个 阴影 效果 必须 指定 阴影 
偏 移 ， 而 模糊 半径 、 阴 影 颜 色 是 可 选 参数 。 


(3) 制作 火焰 文字 
小 试 身手 : 文字 的 火焰 特效 制作 


借助 阴影 效果 列表 机 制 ， 可 以 使 用 阴影 三 加 出 燃烧 的 文字 特效 ， 示 例 代码 如 下 : 
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<!DOCTYPE html> 

<html lang="en"> 
<meta charset="UTF-8"> 
<title>Document</title> 
<head> 

<style> 

body{ 

background:#000; 

} 

p{ 

text-align:center; 
font:bold 50px helvetica, arial, sans-serif; 
color:green; 
text-shadow: 0 0 4px white, 
0 -5px 4px #ff3, 

2px -10px 6px #fd3, 

-2px -15px 11px #f80, 
2px -25px 18px #f20; 

} 

</style> 

</head> 

<body> 

<p> 德 胜 之 家 </p> 
</body> 

</html> 


代码 的 运行 效果 如 


中 


8-8 所 示 


口 Document X 
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(4) 设置 立体 文字 


text-shadow 属性 可 以 使 用 在 :first-letter 和 :first-line 伪 元 素 上 ， 同 时 还 可 以 利 
性 设计 立体 文本 。 


小 试 身手 : 制作 让 文字 立体 显示 的 效果 


使 用 阴影 又 加 出 的 立体 文本 特效 代码 如 下 : 


<!DOCTYPE html> 


<html lang="en"> 

<meta charset="UTF-8"> 
<title>Document</title> 
<head> 

<style> 

body{ 

background:#000; 

} 

p{ 

text-align:center; 
padding:24px 

margin:0; 

font: helvetica, arial, sans-serif; 
font-size:75px; 
font-weight:bold; 
color:green; 
background:#ccc; 
text-shadow: -1px -1px white, 
1px 1px #333; 


通过 左上 和 右 下 添加 1px 错 


(5) 设置 描 边 文字 
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</style> 
</head> 
<body> 
<p> 德 胜出 品 </p> 
</body> 
</html> 


代码 的 运行 效果 如 


网 


8-9 所 示 。 
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德 胜出 品 


图 8-9 


位 的 补 色 阴影 ， 


效果 。 


text-shadow 属性 还 可 以 为 文本 描 边 ， 设 计 方 法 是 分 别 为 文本 的 4 条 边 添加 1px 的 实 


体 阴影 。 
小 试 身手 : 给 文字 设 


置 描 边 效果 


text-shadow 属性 用 法 的 示例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<meta charset="UTF-8"> 
<title>Document</title> 
<head> 

<style> 

body{ 

background:#000; 

} 

p{ 

text-align:center; 
padding:24px 

margin:0; 

font: helvetica, arial, sans-serif; 
font-size:75px; 
font-weight:bold; 
color:white; 


background:#ccc; 
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text-shadow: -1px 0 black, 
0 1px black, 

1px 0 black, 

0-1px black; 

} 

</style> 

</head> 

<body> 

<p> 德 胜出 品 </p> 
</body> 

</html> 


代码 的 运行 效果 如 


四 


8-10 所 示 。 
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图 8-10 


(6) 文字 外 发 光 效 果 
设置 阴影 不 发 生 位 移 ， 同 时 定义 阴影 模糊 显示 ， 这 样 可 以 模拟 出 文字 外 发 光 效 果 。 


小 试 身手 : 让 文字 发 光 的 效果 


示例 代码 如 下 : 


<!IDOCTYPE html> 

<html lang="en"> 
<meta charset="UTF-8"> 
<title>Document</title> 
<head> 

<style> 

body{ 

background:#000; 

} 

p{ 

text-align:center; 
padding:24px 

margin:0; 

font: helvetica, arial, sans-serif; 
font-size:75px; 
font-weight:bold; 
color:#999; 
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background:#ccc; 
text-shadow:0 0 0.2em #fff, 
0 0 0.2em #fff; 

} 

</style> 

</head> 

<body> 

<p> 德 胜出 品 </p> 
</body> 

</html> 


代码 的 运行 效果 如 


网 


8-11 所 示 。 
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图 8-11 


国 8.1.2 设置 文本 溢出 


在 编辑 网 页 文本 时 经 常会 遇 到 文字 太 多 超 
解决 方案 。 
text-overflow 属性 规定 了 当 文 本 溢出 包含 元 素 时 发 生 的 事情 。 
语法 : 
text-overflow: cliplellipsis|string; 
text-overflow 属性 的 值 可 以 是 以 下 几 种 : 
@ clip: 修剪 文本 。 
@ Ellipsis: 显示 省 略 符号 来 代表 被 修剪 的 文本 。 
e@ String: 使 用 给 定 的 字符 串 来 代表 被 修剪 的 文本 。 
下 面 通过 一 个 案例 帮助 理解 text-overflow 属性 。 


小 试 身手 : 设置 文本 溢出 效果 


使 用 text-overflow 属性 的 示例 代码 如 下 : 


EH 


容器 的 尴 众 问题 ，CSS3 新 特性 中 带 来 了 


<!DOCTYPE html> 
<html lang="en"> 
<meta charset="UTF-8"> 
<title>Document</title> 


<head> 
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<style> 

div.test{ 

white-space:nowrap; 

width:12em; 

overflow:hidden; 

border:1px solid #000000; 

} 

div.test:hover{ 

text-overflow:inherit; 

overflow:visible; 

下 

</style> 

</head> 

<body> 

<p> 如 果 您 把 光标 移动 到 下 面 两 个 div 上 ， 就 能 够 看 到 全 部 文本 。</p> 
<p> 这 个 div 使 用 "text-overflow:ellipsis" : </p> 

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in thebox</ 
div> 

<p> 这 个 div 使 用 "text-overflow:clip": </p> 

<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div> 
</body> 

</html> 


代码 运行 效果 如 图 8-12 所 示 。 
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Sr div 上， 就 能 够 看 到 全 部 文 


这 个 div 使 用 "text-overflow-ellipsis" : 
这 个 div 使 用 "text-overflow:clip": 
not fit in the box 


图 8-12 


转 3.1.3 给 文本 换行 


在 编辑 网 页 文本 时 经 常会 遇 到 单词 太 长 超出 容器 一 行 的 尴 炊 问题 ，CSS3 新 特性 中 带 
来 了 解决 方案 。 


小 试 身手 : 文本 换行 的 设置 效果 


word-wrap 属性 允许 长 单词 或 URL 地 址 换行 到 下 一 行 ， 示 例 代码 如 下 : 


<!DOCTYPE html> 


<html lang="en"> 


<meta charset="UTF-8"> 


<title>Document</title> 


<head> 
<style> 
p.test{ 
width:11em; 


border:1px solid #000000; 


</style> 
</head> 
<body> 


<p class="test"> 


This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word 
will break and wrap to the next line. 


</p> 
</body> 
</html> 


代码 运行 效果 如 图 8-13 所 示 。 
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his paragraph contains a 
Very long word: 
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p to the next line. 


图 8-13 


此 时 可 以 看 见 ， 一 个 长 单词 超出 了 容器 的 范围 ， 解 决 方案 如 下 : 


word-wrap: break-word; 


结果 如 图 8-14 所 示 。 


修改 后 的 运行 


Ge 
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图 8-14 


站 Document 


126/127 


多 彩 的 样式 设计 


转 8.1.4 把 单词 拆 分 
word-break 属性 规定 自动 换行 的 处 理 方法 。 通 过 使 用 word-break 属性 ， 可 以 让 浏览 器 
实现 在 任意 位 置 的 换行 。 
word-break 属性 的 值 可 以 是 以 下 几 种 : 
@ normal: 使 用 浏览 器 默认 的 换行 规则 。 
@ break-all: 允许 在 单词 内 换行 。 
@ keep-all: 只 能 在 半角 空格 或 连接 字符 处 换行 。 
word-break 属性 和 word-wrap 属性 都 是 关于 自动 换行 的 操作 , 它们 之 间 有 什么 区 别 呢 ? 
通过 案例 来 帮助 理解 两 者 的 区 别 。 


小 试 身手 : 拆 分 单词 的 方法 展示 


word-break 属性 和 word-wrap 属性 区 分 的 代码 如 下 : 
<!DOCTYPE html> 
<html lang="en"> 
<meta charset="UTF-8"> 


<title>Document</title><head> 
<style> 

p.test1{ 

width:11em; 

border:1px solid #000000; 
word-wrap: break-word; 

} 

p.test2{ 

width:11em; 

border:1px solid #000000; 
word-break:break-all; 

} 

</style> 

</head> 

<body> 

<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p> 
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p> 
</body> 
</html> 


代码 的 运行 效果 如 图 8-15 所 示 。 


isisa 
veryveryveryveryveryvery 
veryveryveryvery long 


国 8.1.5 设置 圆 角 边 框 


border-radius 属性 是 一 个 简写 属性 ， 用 于 设置 4 个 border-*-radius 


如 下 : 
border-radius: 1-4 length|% / 1-4 length|%; 
4 个 border-*-radius 属性 按照 顺序 分 别 为 : 
® border-top-left-radius: 左上 。 
@ border-top-right-radius: 右上 。 
® border-bottom-right-radius: 右 下 。 
® border-bottom-left-radius: 左下 。 


在 圆 角 边框 属性 出 现 之 前 ， 想 要 得 到 一 个 带 有 


属性 。 


语法 格式 


角 边框 的 按钮 ， 需 要 借助 一 些 绘图 软 


件 才能 完成 ， 这 样 做 的 坏处 有 两 点 ， 第 一 是 一 个 页 面 中 的 元 素 需要 美工 和 前 端 两 个 人 配合 
图 


才能 完成 ， 大 大 降低 了 工作 效率 ; 第 二 是 
了 页 面 加 载 速度 变 慢 ， 用 户 体验 极其 不 好 。 


片 的 大 小 


小 试 身手 : 扁平 化 按钮 图 标的 制作 


制作 扁平 化 图 标的 代码 如 下 : 


<!IDOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

body{ 

background: #ccc; 

} 

div{ 


border-radius: 10px; 

} 

</style> 

</head> 

<body> 

<div> 扁平 化 图 标 </div> 
</body> 

</html> 


比 几 行 代码 大 上 很 多 ， 这 样 就 造成 


代码 的 运行 效果 如 图 8-16 所 示 。 
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width: 200px; 

height: 50px; 

margin:20px auto; | | 
font-size: 30px; 

line-height: 45px; 

text-align: center; 

color:#fff; 


DD Document 
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border:2px solid #fff; ! 


的 作用 远 不 止 制 作 一 个 圆 角 按钮 ， 它 的 更 多 用 法 还 需 进 一 步 发 握 。 


转 3.1.6 设置 盒子 阴影 


图 8-16 


如 此 ， 就 可 以 在 不 借助 任何 绘图 软件 的 情况 下 完成 一 个 酷 炫 的 按钮 了 。 当 然 圆 角 边框 


前 面 的 章节 讲解 了 CSS3 的 文本 阴影 ， 同 样 的 CSS3 也 带 来 了 盒子 阴影 ， 利 


盒子 阴 
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影 可 以 制作 出 3D 效果 。 
box-shadow 属性 向 框 添加 一 个 或 多 个 阴影 。 


语法 : 
box-shadow: h-shadow v-shadow blur spread color inset; 


box-shadow 向 框 添加 一 个 或 多 个 阴影 。 该 属性 是 由 逗号 分 隔 的 阴影 列表 ， 每 个 阴影 
由 2-4 个 长 度 值 、 可 选 的 颜色 值 以 及 可 选 的 inset 关键 词 来 规定 。 省 略 长 度 的 值 是 0。 
box-shadow 属性 的 值 包含 了 以 下 几 个 : 
h-shadow: 必需 。 水 平 阴影 的 位 置 。 人 允许 负 值 。 
V-shadow: 必需 。 垂 直 阴 影 的 位 置 。 允 许 负 值 。 
blur: 可 选 。 模 糊 距 离 。 
spread: 可 选 。 阴 影 的 尺寸 。 
color: 可 选 。 阴 影 的 颜色 。 
inset: 可 选 。 将 外 部 阴影 (outset) 改 为 内 部 阴影 。 
可 以 结合 上 一 章节 中 的 圆 角 边框 按钮 制作 出 一 个 炫 酷 的 按钮 ， 当 然 这 个 按钮 是 之 前 按 
钮 的 升级 版 。 


小 试 身手 : 让 扁平 化 图 标 看 起 来 更 酷 


box-shadow 属性 向 框 添加 阴影 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

body{ 

background: #ccc; 

h 

div{ 

width: 200px; 

height: 5Opx; 
margin:30px auto; 
font-size: 30px; 
line-height: 45px; 
text-align: center; 
color:#fff; 

border:5px solid #fff; 
border-radius: 10px; 
background: #f46; 
cursor:pointer; 

} 

div:hover{ 

box-shadow: 0 10px 40px 5px #f46; 
} 
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</style> 

</head> 

<body> 

<div> 更 酷 的 图 标 </div> 
</body> 

</html> 


代码 的 运行 效果 如 图 8-17 所 示 。 


LaJLEIG@T 和 了 


DD Document x 
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图 8-17 


| 8.2 ”页面 中 多 彩 颜色 的 设置 | 


在 CSS3 之 前 ， 只 能 使 用 RGB 模式 定义 颜色 值 ， 只 能 通过 opacity 属性 设置 颜色 的 不 
透明 度 。CSS3 增加 了 3 种 颜色 值 定义 模式 : RGBA 颜色 值 、HSL 颜色 值 和 HSLA 颜色 值 ， 
通过 对 RGBA 颜色 值 和 HSLA 颜色 值 设 定 Alpha 通道 的 方法 来 更 容易 实现 半 透 明文 字 与 
图 像 互 相 重 亚 的 效果 。 


国 8.2.1 使 用 HSL 颜色 值 


在 CSS3 中 新 增 了 HSL 颜色 表现 方式 。HSL 色彩 模式 是 工业 界 的 一 种 颜色 标准 ， 它 
通过 对 色调 (H) 、 饱 和 度 〈S) 和 亮相 (L) 3 个 颜色 通道 的 变化 以 及 它们 互相 之 间 的 至 
加 来 获得 各 种 颜色 。 这 个 标准 几乎 包括 了 人 类 视觉 所 能 感知 的 所 有 颜色 ， 在 屏幕 上 可 以 重 
现 16777216 种 颜色 ， 是 目前 运用 最 广 的 颜色 系统 之 一 。 

在 CSS3 中 ，HSL 色彩 模式 的 表示 语法 如 下 : 


ee 


hsl(<length>,<percentage>,<percentage>) 

hsl0 函数 的 3 个 参数 说 明 如 下 : 

@ <length>: 表示 色调 (Hue) 。Hue 衍生 与 色 盘 ， 取 值 可 以 为 任意 数值 ， 

其 中 0 (或 360、-360) 表示 红色 ，60 表示 黄色 ，120 表示 绿色 ，180 表 
示 青 色 ，240 表示 蓝 色 ，300 表示 洋红 ， 当 然 可 通过 设置 其 他 数值 来 确定 
不 同 颜色 。 

@ <percentage>: 表示 饱和 度 (Saturation) ， 也 就 是 说 该 色彩 被 使 用 了 多 少 ， 
或 者 说 颜色 的 深浅 程度 、 鲜 艳 程 度 。 取 值 为 0%~100% 之 间 的 值 。 其 中 0% 
表示 灰 度 ， 即 没有 使 用 该 颜色 ;100% 饱和 度 最 高 ， 即 颜色 最 艳 。 
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@ <percentage> : 表示 亮度 (lightness ) 。 取 值 为 0%~100% 之 间 的 值 , 其 
表示 最 暗 ，50% 表示 均值 ，100% 表示 最 亮 ， 显 示 为 


白色 。 


PhO% 


来 设计 一 个 颜色 表 ， 因 为 在 网 页 设计 中 利用 这 种 方法 就 可 以 根据 网 页 需要 选择 最 怡 当 


的 配送 方案 。 


小 试 身手 : 设置 网 页 中 的 颜色 搭配 表 


示例 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style type="text/css"> 
table { 
border:solid 1px red; 
background:#eee; 
padding:6px; 
! 
th{ 
color:red; 
font-size:12px; 
font-weight:normal; 
} 
td{ 
width:80px' 
height:30px; 
} 
tr:nth-child(4) td:nth-of-type(1) { background:hsl(0,100%,100%);} 
tr:nth-child(4) td:nth-of-type(2) { background:hsl(0,75%,100%);} 
tr:nth-child(4) td:nth-of-type(3) { background:hsl(0,50%,100%);} 
tr:nth-child(4) td:nth-of-type(4) { background:hsl(0,25%,100%);} 
tr:nth-child(4) td:nth-of-type(5) { background:hsl(0,0%,100%);} 


tr:nth-child(5) td:nth-of-type(1) { background:hsl(0,100%,88%);} 
tr:nth-child(5) td:nth-of-type(2) { background:hsl(0,75%,88%);} 
tr:nth-child(5) td:nth-of-type(3) { background:hsl(0,50%,88%);} 
tr:nth-child(5) td:nth-of-type(4) { background:hsl(0,25%,88%);} 
tr:nth-child(5) td:nth-of-type(5) { background:hsl(0,0%,88%);} 


tr:nth-child(6) td:nth-of-type(1) { background:hsl(0,100%,75%);} 
tr:nth-child(6) td:nth-of-type(2) { background:hsl(0,75%,75%);} 
tr:nth-child(6) td:nth-of-type(3) { background:hsl(0,50%,75%);} 
tr:nth-child(6) td:nth-of-type(4) { background:hsl(0,25%,75%);} 
tr:nth-child(6) td:nth-of-type(5) { background:hsl(0,0%,75%);} 


tr:nth-child(7) td:nth-of-type(1) { background:hsl(0,100%,63%);} 
tr:nth-child(7) td:nth-of-type(2) { background:hsl(0,75%,63%);} 
tr:nth-child(7) td:nth-of-type(3) { background:hsl(0,50%,63%);} 
tr:nth-child(7) td:nth-of-type(4) { background:hsl(0,25%,63%);} 
tr:nth-child(7) td:nth-of-type(5) { background:hsl(0,0%,63%);} 


tr:nth-child(8) td:nth-of-type(1) { background:hsl(0,100%,50%);} 
tr:nth-child(8) td:nth-of-type(2) { background:hsl(0,75%,50%);} 


tr:nth-child(8) td:nth-of-type(3, 
tr:nth-child(8) td:nth-of-type(4, 


{background:hsl(0,50%,50%);} 
{background:hsl(0,25%,50%);} 


tr:nth-child(8) td:nth-of-type(5) { background:hsl(0,0%,50%);} 


tr:nth-child(9) td:nth-of-type(1 
tr:nth-child(9) td:nth-of-type(2, 
tr:nth-child(9) td:nth-of-type(3, 
tr:nth-child(9) td:nth-of-type(4, 
tr:nth-child(9) td:nth-of-typel(5， 


{background:hsl(0,100%,38%);} 
{background:hsl(0,75%,38%);} 
{background:hsl(0,50%,38%);} 
{background:hsl(0,25%,38%);} 
{background:hsl(0,0%,38%);} 


tr:nth-child(10) td:nth-of-type(1) { background:hsl(0,100%,25%);} 
tr:nth-child(10) td:nth-of-type(2) { background:hsl(0,75%,25%);} 
tr:nth-child(10) td:nth-of-type(3) { background:hsl(0,50%,25%);} 
tr:nth-child(10) td:nth-of-type(4) { background:hsl(0,25%,25%);} 
tr:nth-child(10) td:nth-of-type(5) { background:hsl(0,0%,25%);} 


tr:nth-child(11) td:nth-of-type(1) { background:hsl(0,100%,13%);} 
tr:nth-child(11) td:nth-of-type(2) { background:hsl(0,75%,13%);} 
tr:nth-child(11) td:nth-of-type(3) { background:hsl(0,50%,13%);} 
tr:nth-child(11) td:nth-of-type(4) { background:hsl(0,25%,13%);} 
tr:nth-child(11) td:nth-of-type(5) { background:hsl(0,0%,13%);} 


tr:nth-child(12) td:nth-of-type(1) { background:hsl(0,100%,0%);} 
tr:nth-child(12) td:nth-of-type(2) { background:hsl(0,75%,0%);} 
tr:nth-child(12) td:nth-of-type(3) { background:hsl(0,50%,0%);} 
tr:nth-child(12) td:nth-of-type(4) { background:hsl(0,25%,0%);} 
tr:nth-child(12) td:nth-of-type(5) { background:hsl(0,0%,0%);} 


</style> 
</head> 


<body> 
<table class="hslexample"> 
<tbody> 
<tr> 
<th>&nbsp;</th> 
<th colspan="5"> 色相 : H=0 Red </th> 
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</tr> 


</tr> | <tr> 
<tr> ! <th>50 </th> 
<th>&nbsp;</th> ! <td>&nbsp;</td> 
<th colspan="5"> 饱和 度 (&rarr;)</ | <td>&nbsp;</td> 
th> ; <td>&nbsp;</td> 
</tr> | <td>&nbsp;</td> 
<tr> | <td>&nbsp;</td> 
<th> 亮度 (&darr;)</th> | </tr> 
<th>100% </th> : <tr> 
<th>75% </th> | <th>38 </th> 
<th>50% </th> | <td>&nbsp;</td> 
<th>25% </th> | <td>&nbsp;</td> 
<th>0% </th> : <td>&nbsp;</td> 
</tr> ! <td>&nbsp;</td> 
<tr> ] <td>&nbsp;</td> 
<th>100 </th> | </tr> 
<td>&nbsp;</td> | <tr> 
<td>&nbsp;</td> ! <th>25 </th> 
<td>&nbsp;</td> | <td>&nbsp;</td> 
<td>&nbsp;</td> | <td>&nbsp;</td> 
<td>&nbsp;</td> <td>&nbsp;</td> 
</tr> | <td>&nbsp;</td> 
<tr> | <td>&nbsp;</td> 
<th>88 </th> | </tr> 
<td>&nbsp;</td> | <tr> 
<td>&nbsp;</td> | <th>13 </th> 
<td>&nbsp;</td> | <td>&nbsp;</td> 
<td>&nbsp;</td> ! <td>&nbsp;</td> 
<td>&nbsp;</td> | <td>&nbsp;</td> 
</tr> : <td>&nbsp;</td> 
<tr> | <td>&nbsp;</td> 
<th>75 </th> ! </tr> 
<td>&nbsp;</td> | <tr> 
<td>&nbsp;</td> . <th>0 </th> 
<td>&nbsp;</td> ! <td>&nbsp;</td> 
<td>&nbsp;</td> | <td>&nbsp;</td> 
<td>&nbsp;</td> | <td>&nbsp;</td> 
</tr> | <td>&nbsp;</td> 
<tr> | <td>&nbsp;</td> 
<th>63 </th> ! </tr> 
<td>&nbsp;</td> : </tbody> 
<td>&nbsp;</td> ! </table> 
<td>&nbsp;</td> 1 </body> 
<td>&nbsp;</td> | </html> 
<td>g&nbsp;</td> | 代码 的 运行 效果 如 图 8-18 所 示 。 
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图 8-18 


图 8.2.2 使 用 HSLA 颜色 值 


HSLA 色彩 模式 是 HSL 色彩 模式 的 扩展 ， 在 色相 、 饱 和 度 和 亮 


增加 了 不 透明 度 参 数 ， 使 用 HSLA 色彩 模式 可 以 定义 不 同 的 透明 效果 。 


语法 格式 如 下 : 


hsla(<length>,<percentage>,<percentage>,<opacity>) 


度 ， 取 值 在 0~1 之 间 。 


下 面 来 设计 渐变 颜色 ， 通 过 递减 HSLA 颜色 值 的 不 透明 度 来 实现 渐变 1 


小 试 身手 : 制作 颜色 透明 度 的 表现 方式 
使 用 HSLA 色彩 模式 定义 不 同 透明 效果 的 代码 如 下 : 


<!DOCTYPE html> 


<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>Document</title> 

<style type="text/css"> 

li{ height: 18px; } 

li:nth-child(1) { background: hsla(120,50%,50%,0.1); } 
li:nth-child(2) { background: hsla(120,50%,50%,0.2); } 
li:nth-child(3) { background: hsla(120,50%,50%,0.3); } 
li:nth-child(4) { background: hsla(120,50%,50%,0.4); } 
li:nth-child(5) { background: hsla(120,50%,50%,0.5); } 
li:nth-child(6) { background: hsla(120,50%,50%,0.6); } 


度 三 个 要 素 的 基础 上 


其 中 前 3 个 参数 与 hsl0 函数 参数 定义 和 用 法 相同 ， 第 4 个 参数 <opacity> 表示 不 透明 


色 效 果 。 
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IEnth-child(7){background: hsla(120,50%,50%,0.7); } 
li:nth-child(8) { background: hsla(120,50%,50%,0.8); } 
li:nth-child(9) { background: hsla(120,50%,50%,0.9); } 
li:nth-child(10) { background: hsla(120,50%,50%,1); } 
</style> 
</head> 


<body> 

<ol> 
<li></li> 
<li></li> 
<li></li> 
<li></l> 
<li></Il> 
<li></Il> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 

</ol> 


</body> 


</html> 


代码 的 运行 ， 效 果 如 图 8-19 所 示 。 
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| 8.3 ”课堂 练习 | 


本 节 的 课堂 练习 是 给 表单 的 边框 设置 阴影 效果 ， 使 其 显示 效果 更 好 看 。 效 果 如 图 8-20 


所 示 。 


y 口 Document 
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加 


8-20 显示 的 效果 是 不 是 更 加 高 大 上 ? 


<!IDOCTYPE html> 


<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style type="text/css"> 
input, textarea { 
padding: 4px; 
border: solid 1px #ESESES; 
outline: 0; 
font: normal 13px/100% Verdana, 
Tahoma, sans-serif; 
width: 200px; 
background: #FFFFFF; 
box-shadow: rgba(0, 0, 0, 0.1) Opx Opx 


8px; 

-moz-box-shadow: rgba(0, 0, 0, 0.1) Opx 
Opx 8px; 

-webkit-box-shadow: rgba(0, 0, 0, 0.1) Opx 
Opx 8px; 
} 


input:hover, textarea:hover, input:focus, 
textarea:focus { border-color: #C9C9C9; } 
label { 

margin-left: 10px; 

color: #999999; 

display:block; 
} 


.Submit input { 


8-20 效果 的 代码 如 下 : 


width:auto; 
padding: 9px 15px; 
background: #617798; 
border: 0; 
font-size: 14px; 
color: #FFFFFF; 
} 
</style> 
</head> 
<body> 
<form> 
<p class="name"> 
<label for="name"> 姓名 </label> 
<input type="text" name="name" 
id="name" /> 
</p> 
<p class="email"> 
<label for="email"> 邮箱 </label> 
<input type="text" name="email" 
id="email" /> 
</p> 
<p class="submit"> 
<input type="submit" value=" 提交 " /> 
</p> 
</form> 
</body> 
</html> 
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强化 训练 


很 多 用 户 喜欢 使 用 图 形 化 的 首页 引导 浏览 者 的 视线 ， 富 有 冲击 力 的 画面 ， 极 少 的 文字 
说 明 ， 都 能 够 让 浏览 者 有 一 种 继续 探知 的 冲动 。 

此 练习 将 模拟 一 个 黑客 网 站 的 首页 ， 借 助 text-shadow 属性 设计 阴影 效果 ， 通 过 颜色 
的 搭配 ， 营 造 一 种 静 谱 神秘 的 氛围 ， 使 用 两 幅 PNG 图 像 对 页 面 效果 进行 装饰 和 点 缀 ， 最 
后 演示 的 效果 如 图 8-21 所 示 。 
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操作 提示 : 
提示 代码 如 下 : 


body{ 
padding: Opx; 
margin: Opx; 
background: black; 
color: #666; 

} 

#text-shadow-box { 
position: relative; 
width: 598px; 
height: 406px; 
background: #666; 
overflow: hidden; 
border: #333 1px solid; 
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} 

#text-shadow-box div.wall { 
position: absolute; 
width: 100%; 
top: 175px; 
left: Opx 

} 

#text { 
text-align: center; 
line-height: 0.5em; 
margin: Opx; 
font-family: helvetica, arial, sans-serif; 
height: 1px; 
color: #999; 
font-size: 80px; 
font-weight: bold; 
text-shadow: 5px -5px 16px #000; 

} 

divwall div{ 
position: absolute; 
width: 100%; 
height: 300px; 
top: 42px; 
left: Opx; 
background: #999; 


| 本 章 结束 语 | 


本 章 讲解 了 有 关 CSS3 的 文本 样式 ， 包 括 文本 阴影 、 文 本 换行 等 ，CSS3 的 新 特性 为 
处 理 页 面 文本 又 添加 了 新 的 武器 。 

CSS3 中 的 边框 属性 ， 包 括 了 圆 角 边框 和 盒子 阴影 以 及 边界 边框 。 由 于 CSS3 边框 属 
性 的 使 用 ， 大 大 拓展 了 Web 前 端 工 程 师 的 创作 自由 度 。 


ee 
CSS3 用 户 的 交互 青 面 


SUMMARY 


无 论 是 HTML5， 还 是 CSS3， 都 是 非常 注重 用 户 体验 的 ， 随 着 科技 
的 日 新 月 异 ， 移 动 互联 网 将 占据 互联 网 的 主流 ， 所 以 CSS3 提供 
了 多 媒体 查询 功能 ， 在 CSS3 的 新 特性 中 专门 分 出 了 一 块 用 于 处 
理 用 户 界 面 的 操作 ， 在 以 前 的 Web 页 面 中 ， 可 由 用 户 操作 的 部 分 
很 少 ，CSS3 为 此 专门 做 出 了 改进 。 


加 学 习 目 标 


多 媒体 查询 的 语法 和 方法 。 

多 媒体 查询 能 做 什么 。 

学 习 调整 尺寸 和 方 框 大 小 以 及 修饰 外 形 轮 廓 。 
多 列 布局 的 使 用 方法 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时 。 


知识 导 图 : 
多 媒体 查询 能 做 什么 


多 媒体 查询 语法 
多 媒体 查询 方法 


多 媒体 查询 


调整 尺 十 


多 媒体 查询 和 用 户 界面 调整 方 框 大 小 
用 户 界面 简介 


外 形 修饰 


多 列 布局 


| 9.1_ 自 适应 显示 效果 | 


CSS3 多 媒体 查询 根据 设置 


自 适 应 显示 。 媒 体 查 询 可 用 于 检测 很 多 项 目 ， 例 如 : 


viweport( 视窗 ) 的 宽度 与 高 度 ; 设备 的 高 度 与 宽度 ; 朝向 (智能 手机 横 屏 与 竖 屏 ); 分 辩 率 。 
使 用 @media 查询 ， 可 以 针对 不 同 的 媒体 类 型 定义 不 同 的 样式 。@media 可 以 针对 不 
同 的 屏幕 尺寸 设置 不 同 的 样式 , 特别 是 如 果 需 要 设置 响应 式 的 页 面 ,@media 是 非常 有 用 的 。 


9.1.1 多 媒体 查询 语法 


多 媒体 查询 的 最 大 作用 就 是 : 使 得 Web 页 面 能 够 很 好 地 适 配 PC 端 与 移动 端的 浏览 器 


。 多 媒体 查询 的 语法 为 : 


来 帮助 理解 多 媒体 查询 的 用 法 。 


@media mediatype and|not|only (media feature){ 


CsS-Code; 


也 可 以 通过 不 同 的 媒体 使 用 不 同 的 CSS 样式 表 : 


<link rel="stylesheet" media="mediatype and |not|only (media feature)" href="mystylesheet.css"> 


9.1.2 多 媒体 查询 方法 


对 浏览 器 窗口 进行 三 次 判断 ， 分 别 是 窗口 大 于 800px 时 ， 窗 口 大 于 500px 且 小 于 
800px 时 ， 窗 口 小 于 500px 时 ， 对 于 这 三 种 情况 都 进行 了 相应 的 样式 处 理 ， 通 过 一 个 案例 


示例 代码 甸 


<!IDOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

d1{ 

background: pink; 


.d2{ 
background: lightblue; 


.d3{ 


background: yellowgreen; 


.d4{ 


background: yellow; 
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@media screen and (min-width: 800px){ 
.Content{ 

width: 800px; 
margin:20px auto; 

} 

.box{ 

width: 200px; 
height: 200px; 
float:left; 

1 

@media screen and (min-width: 500px) and 
(max-width: 800px){ 
.Content{ 

‘width: 100%; 
column-count: 1; 

} 

.box{ 

Width: 50%; 

height: 150px; 
float:left; 

} 

} 


窗口 大 于 800px 时 的 显示 效果 如 图 9-1 所 示 。 


@media screen and (max-width: 500px){ 
.Content{ 

width: 100%; 
column-count: 1; 

} 

.box{ 

width: 100%; 

height: 100px; 

9 

9 

</style> 

</head> 

<body> 

<div class="content"> 

<div class="box d1"></div> 
<div class="box d2"></div> 
<div class="box d3"></div> 
<div class="box d4"></div> 
</div> 

</body> 

</html> 


图 9-1 


窗口 大 于 500px 县 小 于 800px 时 显示 效果 如 图 9-2 所 示 。 


图 9-2 


窗口 小 于 500px 时 显示 效果 如 图 9-3 所 示 。 
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EECIIET 


图 9-3 


国 9.1.3 自 适 应 的 导航 栏 


带领 大 家 实现 一 个 在 CSS3 的 网 页 中 常见 的 自 适 应 导航 栏 的 案例 ， 通 过 制作 自 适 应 导航 
可 以 深度 掌握 CSS3 中 的 @media 规则 。 
示例 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title> 滑动 菜单 </title> 

<link rel="stylesheet" media="screen and (min-width:800px)" href="CSS/stylel.css"> 
<link rel="stylesheet" media="screen and (min-width:500px) and (max-width:800px)" href="CSS/ 
style2.css"> 

<link rel="stylesheet" media="screen and (max-width:500px)" href="CSS/style3.css"> 
</head> 

<body> 

<nav> 

<div class="home"> 

<i></i> 

<span></span> 

Home 

</div> 

<div class="services"> 

<i></i> 

<span></span> 

services 


</div> 
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<div class="portfolio"> 
<i></i> 
<span></span> 
portfolio 
</div> 
<div class="blog"> 
<i></i> 
<span></span> 
blog 
</div> 
<div class="team"> 
<i></i> 
<span></span> 
The team 
</div> 
<div class="contact"> 
<i></i> 
<span></span> 
contact 
</div> 
</nav> 
</body> 
</html> 


这 次 并 没有 把 CSS 样式 直接 写 在 <style> 标签 内 ， 而 是 通过 三 个 <link> 标签 引入 了 三 
个 外 部 样式 表 ， 这 三 个 外 部 样式 表 分 别 对 应 了 浏览 器 窗口 的 三 种 状态 ， 它 们 分 别 是 当 浏 览 
器 窗口 大 于 800px 时 引用 ， 当 浏览 器 窗口 大 于 500px 且 小 于 800px 时 引用 ， 当 浏览 器 窗口 
小 于 500px 时 引用 。 这 三 种 外 部 样式 表 的 内 容 分 别 是 

浏览 器 窗口 大 于 800px 时 引用 的 样式 表 的 代码 如 下 : 


*{margin:0;padding:0;} 
nav{ 

width:80%; 

max-width: 1200px; 
height:200px; 
margin:20px auto; 

} 

div{ 

width: 16.6%; 
max-width: 200px; 
height:200px; 
background-color: #ccc; 
float:left; 

font-size: 20px; 
color:#fff; 


text-align: center; 
text-transform: capitalize; 
line-height: 320px; 
transition:all 1s; 

} 

span{ 

display:block; 

width: 70px; 

height: 70px; 
background-color: #eee; 
margin:-100px auto; 
border-radius: 35px; 

} 

i{ 

display:block; 

width: 130px; 

height: 130px; 
background-color: rgba(255,255,255,0); 
margin:O0px auto; 
border-radius: 65px; 
transition:all 1s; 

} 

div:hover{ 

height:220px; 

} 

div:hover i{ 
transform:scale(0.5); 
background-color: rgba(255,255,255,0.5) 
} 

‘home{ 
background-color: #ee4499; 
} 

.Services{ 


background-color: #ffaa99; 


.portfolio{ 
background-color: #44ff88; 


.blog{ 
background-color: #77ddbb; 


team{ 
background-color: #55ccff; 


.contact{ 
background-color: #99ccff; 


要 
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} 
代码 的 运行 效果 如 图 9-4 所 示 。 


图 9-4 
浏览 器 窗口 大 于 500px 且 小 于 800px 
引用 样式 表 的 代码 如 下 : 


*{margin:0;padding:0;} 
body{} 

nav{ 

width:90%; 

min-width: 400px; 
height:300px; 
margin:0px auto; 
/*min-width: 1000px;*/ 
} 

div{ 

width:50%; 

/* max-width: 300px; 
min-width: 100px; */ 
height: 100px; 
padding:15px; 
background: red; 
float:left; 
text-align:center; 
box-sizing: border-box; 
span{ 

display:block; 

width: 70px; 

height: 70px; 
background-color: #eee; 
border-radius: 35px; 
float:left; 

/* position:absolute; */ 
} 

.home{ 
background-color: #ee4499; 
} 


.Services{ 
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background-color: #ffaa99; 
} 

.portfoliof 
background-color: #44ff88; 
和 

.blog{ 

background-color: #77ddbb; 
起 

‘team{ 

background-color: #55ccff; 
. 

.Contact{ 
background-color: #99ccff; 
} 


代码 的 运行 效果 如 图 9-5 所 示 。 


Pr 


浏览 器 窗口 小 于 500px 时 引用 样式 表 


的 代码 如 下 : 


*{margin:0;padding:0;} 
body{} 

nav{ 

width:90%6; 
min-width: 400px; 
height:300px; 
margin:0px auto; 
display:flex; 
flex-wrap: wrap; 

} 

div{ 

‘width:100%; 
height: 100px; 
padding:15px; 
background: red; 
/*float:left;*/ 


text-align:center; 
box-sizing: border-box; 
span{ 

display:block; 

width: 70px; 

height: 70px; 
background-color: #eee; 
border-radius: 35px; 
float:left; 

/* position:absolute; */ 

} 

.home{ 

background-color: #ee4499; 
} 

.Services{ 
background-color: #ffaa99; 
.portfoliof 
background-color: #44ff88; 
.blog{ 

background-color: #77ddbb; 
} 

‘team{ 

background-color: #55ccff; 
} 

.contact{ 
background-color: #99ccff; 
} 


代码 的 运行 效果 如 图 9-6 所 示 。 


ee do]Onme ~ 


图 9-6 
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| 9.2 用户 界面 简介 | 


在 学 习 CSS3 用 户 界面 前 先 要 了 解 什么 是 用 户 界面 。 传 统 的 用 户 界面 (User Interface) 
是 指 对 软件 的 人 机 交互 、 操 作 膛 辑 、 界 面 美观 的 整体 设计 。 好 的 全 设计 不 仅 是 让 软件 
有 个 性 、 有 品位 ， 还 要 让 软件 的 操作 变 得 舒适 、 简 单 、 自 由 ， 并 充分 体现 软件 的 定位 和 
特点 。 

用 户 界 面 (User Interface， 简 称 UI， 亦 称 使 用 者 界面 [1]〉 是 系统 和 用 户 之 间 
进行 交互 和 信息 交换 的 媒介 ， 它 实现 信息 的 内 部 形式 与 人 类 可 以 接受 形式 之 间 的 
转换 。 

在 CSS3 中 ， 新 的 用 户 界面 特性 包括 重 设 元 素 尺 寸 、 盒 子 尺 寸 以 及 轮廓 等 。 


国 9.2.1 让 用 户 自 调 尺 十 


在 原生 的 HTML 元 素 当 中 很 少 有 元 素 能 够 让 用 户 自主 去 调节 元 素 的 尺寸 (除了 
textarea 元 素 ) 。 用 户 不 是 专业 开发 人 员 ， 如 果 让 他 们 随意 变动 页 面 的 尺寸 很 容易 发 生 
布局 错乱 等 问题 ， 但 需要 用 户 自己 去 调节 某 些 元 素 尺 寸 时 ， 该 如 何 做 呢 ? 答案 就 是 通过 
JavaScript 达到 目的 , 但 这 样 既 对 开发 人 员 不 够 友好 (代码 很 长 , 代码 交互 逻辑 也 很 复杂 ) ， 
对 用 户 来 说 也 不 够 灵活 ， 这 样 就 出 现 了 两 边 都 不 友好 的 情况 。 而 CSS3 提供 了 resize 属性 ， 
就 可 以 解决 这 一 和 尴 份 问题 了 。 

在 CSS3，resize 属性 规定 是 否 可 由 用 户 调 整 元 素 尺寸 。 

语法 描述 ， 

Tesize: nonelbothlhorizontallvertical; 

resize 属性 的 值 可 以 是 以 下 几 种 : 

e@ none: 用 户 无 法 调整 元 素 的 尺寸 。 

@ both: 用 户 可 以 调整 元 素 的 高 度 和 宽度 。 

@ ”horizontal: 用 户 可 以 调整 元 素 的 宽度 。 

@ vertical: 用 户 可 以 调整 元 素 的 高 度 。 

案例 代码 如 下 : 


<!DOCTYPE html> 


<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

width: 300px; 

height: 200px; 
border:1px solid red; 
text-align: center; 
font-size: 20px; 
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line-height: 200px; 

margin:10px; 

} 

.d2{ 

resize: both; 

overflow:auto; 

} 

</style> 

</head> 

<body> 

<div class="d1"> 这 是 传统 的 div 元 素 </div> 
<div class="d2"> 这 是 可 以 让 用 户 自由 调 尺寸 的 div</div> 
</body> 

</html> 


代码 的 运行 效果 如 图 9-7 所 示 。 


军 ot 
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中 x 


这 是 传统 的 div 元 素 


这 是 可 以 让 用 户 自由 调 尺寸 的 div 


图 9-7 


国 9.2.2 ”调整 方 框 的 大 小 


box-sizing 属性 是 CSS3 的 BOX 属性 之 一 。 看 见 BOX， 相 信 很 多 人 的 第 一 反应 是 box 
Imodel。 没 错 ，box-sizing 属性 和 box-model 的 关系 非 同一 般 。box-sizing 属性 是 BOX 属性 
之 一 ， 所 以 它 也 是 遵循 了 盒子 模型 的 原理 的 。 

box-sizing 属性 允许 以 特定 的 方式 定义 匹配 某 个 区 域 的 特定 元 素 。 

例如 ,需要 并 排放 置 两 个 带 边 框 的 框 , 可 通过 将 box-sizing 设置 为 “border-box ”来 实现 。 
这 可 以 让 浏览 器 呈现 出 带 有 指定 宽度 和 高 度 的 框 ， 并 把 边框 和 内 边 距 放 入 框 中 。 

语法 描述 : 


box-sizing: content-box|border-box |inherit; 
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box-sizing 的 属性 可 以 是 以 下 几 种 : 

(1) content-box 

这 是 由 CSS2.1 规定 的 宽度 高 度 行为 。 

宽度 和 高 度 分 别 应 用 到 元 素 的 内 容 框 。 

在 宽度 和 高 度 之 外 绘制 元 素 的 内 边 距 和 边框 。 

(2) border-box 

为 元 素 设 定 的 宽度 和 高 度 决定 了 元 素 的 边框 盒 。 

为 元 素 指定 的 任何 内 边 距 和 边框 都 将 在 已 设 定 的 宽度 和 高 度 内 进行 绘制 。 

通过 从 已 设 定 的 宽度 和 高 度 中 分 别 减 去 边框 和 内 边 距 才能 得 到 内 容 的 宽度 和 高 度 。 

(3) inherit 

规定 应 从 父 元 素 继承 box-sizing 属性 的 值 。 

需要 关注 第 二 个 值 一 一 border-box 值 的 用 法 。 例 如 ， 当 在 页 面 中 需要 手动 画 出 一 个 按 
钮 div (200*50) ， 在 按钮 中 间 有 一 个 圆 形 的 div (30*30) ， 现 在 需要 让 这 个 圆 形 的 div 
居中 于 方形 的 按钮 。 传 统 的 做 法 只 能 去 设置 圆 形 div 的 margin ， 以 达到 让 其 居中 的 目的 ， 
这 还 要 考虑 到 它 的 父 级 是 否 也 有 margin 值 ， 因 为 会 产生 外 边 距 合 并 的 问题 ， 这 样 做 起 来 
要 考虑 的 太 多 ， 不 方便 。 

或 者 换 一 种 思路 ， 不 对 圆 形 div 进行 操作 ， 而 是 让 方形 按钮 拥有 内 边 距 ， 是 否 可 以 解 
决 这 个 问题 呢 ? 

代码 如 下 : 


<!IDOCTYPE html> 
<html lang="en"> 


<head> 

<meta charset="UTF-8"> | borderradius: 15px; 
<title>Document</title> | background: #fff; 

<style> | } 

.btn{ | .clf 

width: 200px; | top:10px; 

height: 50px; | left:85px; 

border-radius: 10px; | position:absolute; 
background: #46; | } 

margin:10px; | </style> 

position:relative; 1 </head> 

} ! <body> 

.d2{ | <div class="btn d1"> 
padding:10px 85px; <div class="circle c1"></div> 
width: 30px; </div> 

height: 30px; | <div class="btn d2"> 

} | <div class="circle c2"></div> 
.Circle{ | </div> 

width: 30px; ! </body> 


height: 30px; </html> 
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代码 的 运行 效果 如 图 9-8 所 示 。 


图 9-8 


以 上 两 种 做 法 其 实 都 是 经 过 了 二 次 计算 的 ， 尤 其 是 第 二 种 甚至 改变 了 外 部 div 的 宽 高 
属性 值 才 得 到 一 个 想 要 的 按钮 ， 显 然 这 两 种 做 法 都 不 够 友好 。 但 是 如 果 使 用 CSS3 用 户 界 
面 新 特性 来 做 这 个 案例 将 会 非常 简单 ， 不 需要 做 二 次 计算 ， 也 不 需要 改变 父 级 div 的 宽 高 


属性 就 可 以 达到 想 要 的 效果 了 。 

代码 如 下 : 

<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.btn{ 

width: 200px; 

height: 5Opx; 
border-radius: 10px; 
background: #f46; 
margin:10px; 
position:relative; 

.d2{ 

padding:10px 85px; 
width: 30px; 

height: 30px; 

} 

.Circle{ 

width: 30px; 

height: 30px; 
border-radius: 15px; 
background: #fff; 

} 


C1{ 

top:10px; 

left:85px; 
position:absolute; 

! 

.d3{ 

box-sizing: border-box; 
padding:10px 85px; 
</style> 

</head> 

<body> 

<div class="btn d1"> 

<div class="circle c1"></div> 
</div> 

<div class="btn d2"> 

<div class="circle"></div> 
</div> 

<div class="btn d3"> 

<div class="circle"></div> 
</div> 

</body> 

</html> 


代码 的 运行 效果 如 图 9-9 所 示 。 
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La 


使 用 了 box-sizing 属性 之 后 所 得 到 的 结果 就 是 为 外 部 的 div 设置 了 padding 属性 ， 但 
是 这 样 做 并 没有 改变 外 部 div 的 宽 高 属性 ， 只 是 成 功 地 让 内 部 的 圆 形 div 居中 了 。 


国 9.2.3 修饰 外 形 轮廓 样式 


outline-offset 属性 对 轮廓 进行 偏 移 ， 并 在 边框 边缘 进行 绘制 。 
轮廓 与 边框 有 两 个 不 同 的 方面 : 轮廓 不 占用 空间 ; 轮廓 可 能 是 非 和 矩形 。 
示例 代码 如 下 : 


<!DOCTYPE html> 


<html lang="en"> 


<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

width: 200px; 

height: 100px; 
outline:2px solid black; 
margin:60px; 

b 

.d1{ 

background: pink; 

1 

.d2{ 

background: greenyellow; 
outline-offset: 10px; 

} 

</style> 

</head> 

<body> 
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<div class="d1"> 我 的 外 轮廓 没有 被 偏 移 </div> 
<div class="d2"> 我 的 外 轮廓 是 被 偏 移 的 </div> 
</body> 
</html> 


代码 的 运行 效果 如 图 9-10 所 示 。 


过 -Ox 
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9-10 


国 9.2.4 界面 的 多 列 布局 


CSS3 提供 了 一 个 新 属性 一 columns 用 于 进行 多 列 布局 。 在 这 之 前 ， 有 些 排版 用 CSS 
动态 实现 是 比较 困难 的 。 如 竖 版 报纸 布局 ， 这 在 以 前 是 很 难 实现 的 ， 比 较 稳妥 的 方法 也 是 
通过 JavaScript 来 实现 ， 但 是 操作 非常 烦琐 。 而 拥有 了 CSS3 的 columns 属性 之 后 一 切 将 
会 变 得 非常 容易 ， 这 就 是 CSS3 带 来 的 多 列 布局 。 

多 列 布局 在 Web 页 面 中 的 使 用 其 实 很 频繁 ， 常 见 的 如 瀑布 流 的 照片 背景 墙 ， 移 动 端 
的 响应 式 布局 。 

CSS3 多 列 布局 的 相关 属性 如 下 : 

@ column-count: 规定 元 素 应 该 被 划分 的 列 数 。 
column-gap: 规定 列 之 间 的 间隔 。 
column-rule-style: 规定 列 之 间 的 样式 规则 。 
column-rule-width: 规定 列 之 间 的 宽度 规则 。 
column-rule-color: 规定 列 之 间 的 颜色 规则 。 
column-rule: 是 一 个 简写 属性 ， 用 于 设置 所 有 column-rule-* 属 
column-span: 规定 元 素 应 横 跨 多 少 列 。 
column-width: 规定 列 的 宽度 。 
columns: 是 一 个 简写 属性 ， 用 于 设置 列 宽 和 列 数 。 
案例 代码 如 下 : 


<!DOCTYPE html> 


<html lang="en"> 


到 
四 


<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
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<style> 

div{ 

width: 800px; 
border:1px solid red; 
column-count: 3; 

} 

</style> 

</head> 

<body> 


<div> 


先帝 创业 未 半 而 中 道 崩 尹 ， 今 天 下 三 分 ， 益 州 疲 蜂 ， 此 诚 危急 存亡 之 秋 也 。 然 侍卫 之 
不 懈 于 内 ， 忠 志 之 土 忘 身 于 外 者 ， 盖 追 先帝 之 殊 遇 ， 欲 报 之 于 陛下 也 。 诚 宜 开 张 圣 听 ， 
以 光 先 帝 遗 德 ， 恢 弘 志士 之 气 ， 不 宜 妄 自 菲 薄 ， 引 喻 失 义 ， 以 塞 忠 谏 之 路 也 。 

宫 中 府中 ， 俱 为 一 体 ， 陆 罚 臧 否 ， 不 宜 异 同 。 若 有 作 奸 犯 科 及 为 忠 善 者 ， 宜 付 有 司 论 
其 刑 赏 ， 以 昭 陛下 平 明之 理 ， 不 宜 偏 私 ， 使 内 外 异 法 也 。 侍 中 、 侍 郎 郭 信之 、 费 神 、 董 允 
等 ， 此 皆 良 实 ， 志 虑 忠 纯 ， 是 以 先帝 简 拔 以 遗 陛下 。 思 以 为 宫 中 之 事 ， 事 无 大 小 ， 悉 以 次 
之 ， 然 后 施行 ， 必 得 神 补 阅 漏 ， 有 所 广 益 。 

将 军 向 宠 ， 性 行 淑 均 ， 晓 畅 军 事 ， 试 用 之 于 车 日， 先帝 称 之 日 能 ， 是 以 众 议 举 宠 为 督 。 
昌 以 为 营 中 之 事 ， 悉 以 咨 之 ， 必 能 使 行 阵 和 睦 ， 优 劣 得 所 

亲 贤 臣 , 远 小 人 , 此 先 汉 所 以 兴隆 也 ; 亲 小 人 , 远 贤 臣 , 此 后 汉 所 以 倾 矣 也 。 先帝 在 时 ， 
每 与 臣 论 此 事 ,未 尝 不 叹息 痛恨 于 桓 、 灵 也 。 侍 中 、 尚 书 、 长 史 、 参 军 ， 此 悉 贞 良 死 节 之 臣 ， 
愿 陛下 亲 之 信之 ， 则 汉 室 之 隆 ， 可 计 日 而 待 也 。 臣 本 布衣 ， 身 耕 于 南阳 ， 苟 全 性 命 于 乱世 ， 
不 求 闻 达 于 诸 修 。 先 帝 不 以 臣 插 部， 猥 自 枉 届 ， 三 顾 臣 于 草 访 之 中 ， 咨 臣 以 当世 之 事 ， 由 
是 感激 ， 送 许 先 帝 以 驱 驰 。 后 值 倾覆 ， 受 任 于 败 军 之 际 ， 奉 命 于 危难 之 间 ， 尔 来 二 十 有 一 
年 侨 。 

</div> 

</body> 

</html> 


代码 的 运行 效果 如 图 9-11 所 示 。 


， 盖 追 先帝 之 殊 : 
、 诚 让 开张 圣 听 ， 以 3 
志士 之 气 ， 不 宜 : 
中 也 。 
车 有 作 寻 犯 科 及 为 忠 善 者 , 盘 远 小 _ 
度 付 有 司 论 其 刑 赏 ， 以 昭 陛 下 平 明之 人 ， 此 先 汉 所 以 兴隆 也 ; 亲 小 人 , 远 
晶 ， 不 宜 偏 私 ， 使 内 外 异 法 也 。 侍 。。” 贤 臣 ， 此 后 汉 所 以 倾 舌 也 。 先 帝 在 
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| 9.3 ”课堂 练习 | 


本 节 的 课堂 练习 为 大 家 准备 了 页 面 自 适 应 的 做 法 ， 请 根据 
效果 。 


吧 


9-12 所 示 制 作出 相同 的 


[LaJIET 画 [ 区 


) 口交 这 适应 布局 x 


GC © filey//c/Users/Administrator/Desktop/Untitled-... 仙 


可 以 自 适应 浏览 器 完 度 ， 高 度 可 | 
可 以 由 内 容 撑 开 。 


图 9-12 


9-12 所 示 的 效果 代码 如 下 : 


<!DOCTYPE html> | height: 200px; 
<html> | } 
<head> ! :Center { 
<meta charset="utf-8" /> | background: #FFFFFF; 
<title> 宽度 自 适应 布局 </title> . margin-left: 110px; 
<style> | margin-right: 160px; 
.wrap{ ! height: 150px; 
background-color: #D66464; ! } 
小 </style> 
.Clearfix:after { | </head> 
content: ™"; ! <body> 
clear: both; | <div class="wrap clearfix"> 
display: block; ; <div class="left"> 宽度 固定 ， 高 度 
} | 可 国定 也 可 以 由 内 容 撑 开 。</div> 
:left{ ! <div class="right"> 宽度 固定 ， 高 度 
float: left; ! 可 固定 也 可 以 由 内 容 撑 开 。</div> 
width: 100px; <div class="center"> 可 以 自 适 应 浏 
background:#9C3; ! 览 器 宽度 ， 高 度 可 固定 也 可 以 由 内 容 撑 
height: 180px; ! 开 。</div> 
} | </div> 
.right { ! </body> 
float: right; . </html> 
width: 150px; | 


background:#C93; 
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强化 训 | 


如 今 的 网 页 设计 都 需要 网 页 拥有 自 适 应 性 ， 所 以 本 章 的 强化 练习 是 来 做 一 个 简单 的 自 适 
应 页 面 。 效 果 如 图 9-13 所 示 。 
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9=13 
操作 提示 : 
代码 如 下 : 
<style type="text/css"> | background-color: yellow; 
#container{ | } 
display: -moz-box; | #right-sidebar{ 
display: -webkit-box; | width: 200px; 
} | padding: 20px; 
#left-sidebar{ | background-color: limegreen; 
width: 200px; | } 
padding: 20px; | #left-sidebar, #contents, #right-sidebar{ 
background-color: orange; | -moz-box-sizing: border-box; 
} | -webkit-box-sizing: border-box; 
#contents{ ! } 
-moz-box-flex:1; ! </style> 


-webkit-box-flex:1; 
padding: 20px; 


| | 


本 章 结束 语 | 


通过 本 章 的 学 习 ， 对 媒体 的 查询 和 用 户 界面 的 设计 有 了 一 定 的 了 解 ， 讲 解 了 多 媒体 
查询 能 做 什么 ， 多 媒体 查询 的 语法 和 用 户 界面 设计 ， 最 后 通过 示例 具体 讲解 了 这 些 知识 的 


应 用 。 


知识 导 图 : 


EE 
弹性 盒子 模型 


SUMMARY 


盒子 模型 使 得 divtcss 布局 在 Web 页 面 当 中 如 鱼 得 水 ， 传 统 


的 盒 


子 模型 几乎 可 以 满足 任何 PC 端的 页 面 布 局 需求 ， 但 在 今天 的 移 
动 互 联网 时 代 ， 传 统 的 div+css 布局 已 不 能 满足 移动 端的 页 面 需 
求 。CSS3 带 来 了 弹性 盒子 ， 这 种 盒子 模型 不 仅 可 以 在 PC 端 完 成 


布局 ， 还 可 以 在 移动 端 进行 ， 布 局 。 


图 学 习 目 标 

掌握 CSS 中 的 盒子 边 距 设置 。 

了 解 CSS3 弹性 盒子 对 浏览 器 的 支持 情况 。 

学 会 弹性 盒子 的 内 容 即 对 子 父 集 容器 的 设置 。 


男 课时 安排 
理论 知识 1 课时 。 
上 机 练习 2 课时。 


外 边 距 设置 


弹性 盒子 


弹性 盒子 简介 
对 父 级 容器 的 设置 


对 子 级 内 容 的 设置 
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Sa P= 
| 10.1 盒子 模型 | 
对 盒子 模型 最 常用 的 操作 就 是 使 用 内 外 边 距 , 同时 这 也 是 div+css 布局 中 最 经 典 的 操作 。 


国 10.1.1 盒子 简介 


网 页 设计 中 常见 的 属性 名 包括 : 内 容 (content)、 填 充 (padding)、 边 框 (border)、 边 界 
(margin)， CSS 盒子 模型 也 具备 这 些 属性 。 
盒子 模型 的 示意 图 如 图 10-1 所 示 。 


图 10.1.2 外 边 距 设置 


设置 外 边 距 最 简单 的 方法 就 是 使 用 margin 属性 。margin 边界 环绕 在 该 元 素 的 content 
域 四 周 ， 如 果 margin 的 值 为 0， 则 margin 边界 与 border 边界 重合 。 这 个 简写 属性 设置 
一 个 元 素 所 有 外 边 距 的 宽度 ， 或 者 设置 各 边 外 边 距 的 宽度 。 
该 属性 接受 任何 长 度 单 位 ， 可 以 是 像素 、 毫 米 、 厘 米 和 em 等 ， 也 可 以 设置 为 auto ( 
动 ) 。 常 见 做 法 是 为 外 边 距 设置 长 度 值 ， 允 许 使 用 负 值 〈 见 表 10-1) 。 
表 10-1 外 边 距 属 性 


属性 定义 
Margin 简写 属性 。 在 一 个 声明 中 设置 所 有 的 外 边 距 属性 
margin-top 设置 元 素 的 上 边 距 
A 
margin-bottom 设置 元 素 的 下 边 距 
margin-left 设置 元 素 的 左边 距 


下 面 通过 一 个 实例 来 了 解 margin 属性 。 


小 试 身手 : margin 属性 的 实际 应 用 


margin 属性 的 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 


弹性 盒子 模型 


<head> 


[aJ[=[S[ % 


<meta charset="UTF-8"> DD Document x 
<title>Document</title> 
<style> 

div{ 

width: 100px; 

height: 100px; 
border:5px red solid; 

} 

.d2{ 

margin-top: 20px; 
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margin-right: auto; 
margin-bottom: 80px; 
margin-left: 60px; 
</style> 

</head> 

<body> 

<div class="d1"></div> 
<div class="d2"></div> 
<div class="d3"></div> 
</body> 

</html> 


代码 的 运行 效果 如 图 10-2 所 示 。 
外 边 距 除了 这 样 简单 的 使 用 之 外 , 还 可 以 利用 外 边 距 对 块 级 元 素 进行 水 平 居中 的 操作 。 
具体 实现 思路 就 是 只 需要 让 左右 边 距 自 动 即 可 。 


小 试 身手 : 让 元 素 水 平 居中 的 方法 
块 元 素 的 水 平 居中 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 


图 10-2 


<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

width: 100px; 

height: 100px; 
border:2px green solid; 
} 

.d2{ 

margin:20px auto; 

-d3{ 


width: 400px; 


height: 300px; 

} 

.d4{ 

margin:10px auto; 

} 

</style> 

</head> 

<body> 

<div class="d1"></div> 
<div class="d2"></div> 
<div class="d3"></div> 
<div class="d4"></div> 
</div> 

</body> 

</html> 


代码 的 运行 效果 如 图 10-3 所 示 。 


这 段 代码 设置 了 第 二 个 div， 以 进行 页 面 的 
div， 并 设置 了 居中 操作 。 


国 10.1.3 外边 距 合并 


图 10-3 


居 品 


显示 ， 在 第 三 个 div 中 又 多 套 了 一 个 


外 边 距 合 并 〈 肥 加 〉 是 一 个 相当 简单 的 概念 。 但 在 对 网 页 进行 布局 时 ， 


混淆 。 


简单 地 说 ， 外 边 距 合并 指 的 是 当 两 个 垂直 外 边 距 相遇 时 ， 它 们 将 形成 一 个 外 边 距 。 合 
并 后 的 外 边 距 的 高 度 等 于 两 个 发 生 合并 的 外 边 距 的 高 度 中 的 较 大 者 。 
当 一 个 元 素 出 现在 另 一 个 元 素 上 面 时 ， 第 一 个 元 素 的 下 外 边 距 与 第 二 个 元 素 的 上 外 边 


距 会 发 生 合并 。 如 图 10-4 所 示 。 


图 10-4 


当 一 个 元 素 包 含 在 另 一 个 元 素 中 时 《假设 没有 内 边 距 或 边框 把 外 边 距 分 隔 


) ， 它 们 
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的 上 /或 下 外 边 距 也 会 发 生 合并 。 如 图 10-5 所 示 。 


图 10-5 


尽管 看 上 去 有 些 奇 怪 ， 但 是 外 边 距 可 以 与 自身 发 生 合并 。 
假设 有 一 个 空 元素 ， 它 有 外 边 距 ， 但 是 没有 边框 或 填充 。 在 这 种 情况 下 ， 上 外 边 距 与 
下 外 边 距 就 磁 到 了 一 起 ， 它 们 会 发 生 合 并 。 


小 试 身手 : 两 个 元 素 的 合并 操作 


外 边 距 合并 的 代码 如 下 ; 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.Container{ 

width: 300px; 

height: 300px; 
margin:50px; 
background: pink; 

h 

.Content{ 

width: 150px; pe [les] 


一 
height: 150px; (OD ve varninisrst FT 


margin:30px; 
background: green; 

I 

</style> 

</head> 

<body> 

<div class="container"> 
<div class="content"></div> 
</div> 

</body> 

</html> 


代码 的 运行 效果 如 图 10-6 所 示 。 a 


型 文本 页 面 为 例 。 第 一 个 段落 上 


级 div 的 边 距 ， 这 时 它们 的 外 边 距 便 出 i 


4 


以 上 代码 中 对 容器 div 和 内 容 div 分 别 设置 了 外 边 距 ， 但 是 父 级 div 的 边 距 要 大 于 子 


E 这 种 外 边 距 合 并 的 现象 的 ， 尤 其 
一 个 简单 的 小 技巧 来 消除 外 边 距 带 来 的 困扰 。 


现 了 合并 的 现象 。 其 实在 页 面 布局 当中 是 不 希望 发 


是 在 父 级 元 素 与 子 级 元 素 产生 外 边 距 合 并 时 。 下 面 通过 


小 试 身手 : 解决 外 边 距 合并 的 设置 
消除 外 边 距 合并 的 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.container{ 

width: 500px; 

height: 500px; 
margin:50px; 
background: pink; 
border:1px solid blue; 
} 

.Content{ 

width: 200px; 

height: 200px; 
margin:30px; 
background: green; 

} 

</style> 

</head> 

<body> 


<div class="container"> 
<div class="content"></div> 
</div> 

</body> 

</html> 


代码 的 运行 效果 如 图 10-7 所 示 。 


| 


图 10-7 


这 段 代码 只 是 给 父 级 容器 添加 了 一 个 1px 的 边框 ， 就 解决 了 外 边 距 合并 的 问题 ， 是 不 
是 很 简单 ? 


外 边 距 合并 的 现象 其 实 也 是 有 其 必要 性 的 。p 标签 段落 元 素 与 生 俱 来 就 
是 拥有 上 下 8px 外 边 距 的 ， 因 为 外 边 距 的 合并 也 是 使 得 一 系列 的 段落 元 素 


占用 空间 非常 小 的 原因 ， 因 为 它们 所 有 的 外 边 距 都 合并 到 一 起 ， 形 成 了 一 
| 个 小 的 外 边 距 。 


外 边 距 合并 初 看 上 去 可 能 有 点 奇怪 ， 但 实际 上 它 是 有 意义 的 。 以 由 几 个 段落 组 成 的 典 


EE 


的 空间 等 


段落 的 上 外 边 距 。 如 果 没有 外 边 距 合并 ， 后 
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续 所 有 段落 之 间 的 外 边 距 都 将 是 相 邻 上 外 边 距 和 下 外 边 距 的 和 。 这 意味 着 段落 之 间 的 空间 
是 页 面 顶部 的 两 倍 。 如 果 发 生 外 边 距 合并 , 段落 之 间 的 上 外 边 距 和 下 外 边 距 就 合并 在 一 起 ， 
这 样 各 处 的 距离 就 一 致 了 。 


图 10.1.4 内 边 距 设置 


元 素 的 内 边 距 在 边框 和 内 容 区 之 间 。 控 制 该 区 域 最 简单 的 属性 是 padding 属性 。 
padding 属性 定义 元 素 边框 与 元 素 内 容 之 间 的 空白 区 域 。 
padding 属性 : 定义 元 素 的 内 边 距 ， 接受 长 度 值 或 百分比 值 ， 但 不 允许 使 用 负 值 。 
例如 ， 如 果 希 望 所 有 hl 元 素 的 各 边 都 有 10 像素 的 内 边 距 ， 可 进行 如 下 设置 ; 


hl {padding: 10px;} 

还 可 以 按照 上 、 右 、 下 、 左 的 顺序 分 别 设置 各 边 的 内 边 距 ， 各 边 均 可 以 使 用 不 同 的 单 
位 或 百分比 值 : 

h1 {padding: 10px 0.25em 2ex 20%;} 

单 边 内 边 距 属 性 ， 也 通过 使 用 下 面 4 个 单独 的 属性 ,分 别 设置 上 、 右 、 下 、 左 内 边 距 ， 
下 面 规则 的 实现 效果 与 上 面 的 简写 规则 完全 相同 。 


hi{ 
padding-top: 10px; 


padding-right: 0.25em; 
padding-bottom: 2ex; 
padding-left: 20%; 

} 


前 面 提 到 过 ， 可 以 为 元 素 的 内 边 距 设置 百分数 值 ， 百 分 数值 是 相对 于 其 父 元 素 的 
width 计算 的 ， 这 一 点 与 外 边 距 一 样 。 所 以 ， 如 果 父 元 素 的 width 改变 ， 它 们 也 会 改变 。 
下 面 这 条 规则 把 段落 的 内 边 距 设置 为 父 元 素 width 的 10%: 


p {padding: 10%;} 


| 10.2 弹性 盒子 | 


弹性 盒子 由 弹性 容器 (Flex container) 和 弹性 盒子 元 素 (Flex item) 组 成 ， 它 是 通过 设置 
display 属性 的 值 为 flex 或 inline-flex 将 其 定义 为 弹性 容器 。 弹 性 容器 内 包含 了 一 个 或 多 个 
弹性 子 元 素 。 弹 性 盒子 只 定义 了 弹性 子 元 素 如 何在 弹性 容器 内 布局 ， 弹 性 子 元 素 通 常 在 弹 
性 盒子 内 一 行 显示 ， 上 默认 情况 下 ， 每 个 容器 只 有 一 行 。 


国 10.2.1 弹性 盒子 基础 


弹性 盒子 是 CSS3 的 一 种 新 的 布局 模式 。CSS3 弹性 盒子 (Flexible Box 或 Hexbox) ， 
是 一 种 当 页 面 需要 适应 不 同 的 屏幕 大 小 以 及 设备 类 型 时 确保 元 素 拥 有 恰当 的 行为 的 布局 方 
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式 。 引 入 弹性 盒子 布局 模型 的 目的 是 提供 一 种 更 加 有 效 的 方式 来 对 一 个 容器 中 的 子 元 素 进 
行 排列 、 对 齐 和 分 配 空白 空间 。 

传统 的 div+css 布局 方案 是 依赖 于 盒子 模型 的 ， 基 于 display 属性 ， 如 果 需 要 还 会 用 上 
position 属性 和 float 属性 。 但 是 这 些 属性 想 要 应 用 于 特殊 布局 非常 困难 例如 垂直 和 居中 ， 
另外 这 些 属性 对 于 新 手 来 说 也 很 不 友好 ， 很 多 新 手 都 弄 不 清楚 absolute 和 relative 的 区 别 ， 
以 及 它们 应 用 于 元 素 时 这 些 元 素 的 top、left 等 值 到 底 是 相对 于 页 面 还 是 父 级 元 素来 进行 
定位 的 。 

在 2009 年 ，W3C 提出 了 一 种 新 的 方案 一 -Flex 布局 。Flex 布局 可 以 更 加 简便 地 、 
完整 地 实现 各 种 页 面 布局 方案 。Flex， 单 从 单词 的 字面 来 看 是 收缩 的 意思 ， 但 是 在 CSS3 
当中 却 有 弹性 的 意思 。flex-box: 弹性 盒子 ， 用 于 给 盒子 模型 以 最 大 的 灵活 性 。 而 任何 一 
个 容器 都 可 以 设置 成 一 个 弹性 盒子 ， 但 是 需要 注意 的 是 ， 设 为 Flex 布局 以 后 ， 子 元 素 的 
float、clear 和 vertical-align 属性 将 失效 。 


国 10.2.2 ”对 父 级 容器 的 设 


可 以 通过 对 父 级 元 素 进行 一 系列 的 设置 ， 从 而 起 到 约束 子 级 元 素 排列 布局 的 目的 。 可 
以 对 父 级 元 素 设置 的 属性 有 以 下 几 种 : 

(1) flex-direction 

flex-direction 属性 规定 灵活 项 目的 方向 〈 见 表 10-2) 。 

注意 : 如 果 元 素 不 是 弹性 盒 对 象 的 元 素 ， 则 flex-direction 属性 不 起 作 

CSS 语法 : 


flex-direction: row|row-reverse|column |column-reverse |initial |inherit; 


表 10-2 flex-direction 本 


全 
| rw | 默认 从 。 灵活 所 
一 一 一 一 一 


column 


小 试 身 手 : 规定 项 目的 方向 的 设置 
设置 项 目的 方向 代码 如 下 : 


<!IDOCTYPE html> 


<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.container{ 

width: 1200px; 

height: 200px; 
border:5px green solid; 


} 
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.content{ 

width: 100px; 

height: 100px; 

background: lightpink; 
color:#fff; 

font-size: 5Opx; 

text-align: center; 
line-height: 100px; 

1 

</style> 

</head> 

<body> 

<div class="container"> 

<div class="content">1</div> 
<div class="content">2</div> 
<div class="content">3</div> 
<div class="content">4</div> 
<div class="content">5</div> 
</div> 

</body> 

</html> 


此 时 ， 并 没有 对 父 级 div 元 素 做 任何 关于 弹性 盒子 布 


正常 结果 ， 如 图 10-8 所 示 。 


局 的 设置 ， 所 以 得 到 的 结果 也 是 


图 10-8 


在 传统 布局 中 ， 如 果 对 需要 的 子 级 div 进行 横向 排列 ， 大 多 都 会 使 用 
float 属性 , 但 众所周知 , float 属性 会 改变 元 素 的 文档 流 ,， 有 时 甚至 会 造成 “高 
度 袁 陷 ” 的 后 果 ， 所 以 使 用 起 来 很 不 方便 。 但 如 果 使 用 flex-direction 属性 


来 布局 的 话 ， 则 会 变 得 非常 简单 。 


CSS 代码 如 下 : 


display: flex; 


代码 的 运行 效果 如 图 10-9 所 示 。 


项 目 1 项 目 2 项 目 3 项 目 4 项 目 5 


10-9 


(2) justify-content 

内 容 对 齐 (justify-content〉 属 性 应 用 在 弹性 容 嚣 上， 把 弹性 项 沿 着 弹性 容器 的 主轴 线 
(main axis) 对齐。 

语法 描述 : 


justify-content: flex-start | flex-end | center | space-between | space-around 


justify-content 属性 的 值 有 以 下 几 种 : 


flex-start: 默认 值 。 项 目 位 于 容器 的 开头 。 弹 性 项 目 向 行头 紧 挨 着 填充 。 
这 个 是 默认 值 。 第 一 个 弹性 项 的 main-start 外 边 距 边线 被 放置 在 该 行 的 
main-start 边线 ， 而 后 续 弹 性 项 依次 平 齐 摆 放 。 

flex-end: 项 目 位 于 容器 的 结尾 。 弹 性 项 目 向 行 尾 紧 挨 着 填充 。 第 一 个 弹 
性 项 的 main-end 外 边 距 边线 被 放置 在 该 行 的 main-end 边线 ， 而 后 续 弹 
性 项 依次 平 齐 摆 放 。 

center: 项 目 位 于 容器 的 中 心 。 弹 性 项 目 居 中 紧 挨 着 填充 〈 如 果 剩 余 的 自 
由 空间 是 负 的 ， 则 弹性 项 目 将 在 两 个 方向 上 同时 溢出 ) 。 

space-between: 项 目 位 于 各 行 之 间 留 有 空白 的 容器 内 。 弹 性 项 目 平 均 分 
布 在 该 行 上 。 如 果 剩 余 空 间 为 负 或 者 只 有 一 个 弹性 项 ， 则 该 值 等 同 于 
flex-start。 否 则 ， 第 1 个 弹性 项 的 外 边 距 和 行 的 main-start 边线 对 齐 ， 而 
最 后 1 个 弹性 项 的 外 边 距 和 行 的 main-end 边线 对 齐 。 剩 余 的 弹性 项 分 布 
在 该 行 上 ， 相 邻 项 目的 间隔 相等 。 
space-around: 项 目 位 于 各 行 之 前 、 之 间 、 之 后 都 留 有 空白 的 容器 内 。 阐 
性 项 目 平均 分 布 在 该 行 上 ， 两 边 留 有 一 半 的 间隔 空间 。 如 果 剩 余 空间 为 
负 或 者 只 有 一 个 弹性 项 ， 则 该 值 等 同 于 center。 否 则 ， 弹 性 项 目 沿 该 行 
分 布 ， 且 彼此 间隔 相等 〈 比 如 是 20px) ， 同 时 首尾 两 边 和 弹性 容器 之 间 
留 有 一 半 的 间隔 〈1/2*20px=10px) 。 

initial: 设置 该 属性 为 它 的 默认 值 。 

inherit: 从 父 元 素 继承 该 属性 。 


小 试 身手 : 内 容 对 齐 属性 的 应 用 方法 


内 容 对 齐 的 默认 值 的 示例 代码 如 下 : 
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<!DOCTYPE html> height: 100px; 
<html lang="en"> background: lightpink; 
<head> color:#fff; 


<meta charset="UTF-8"> 


font-size: 50px) 


<title>Document</title> text-align: center; 
<style> line-height: 100px; 
.Container{ 上 

width: 1200px; </style> 

height: 800px; </head> 
border:5px red solid; <body> 


display:flex; 

justify-content: flex-start; 
justify-content: flex-end; 
justify-content: center; 
justify-content: space-between; 
justify-content: space-around; 


<div class="container"> 

<div class="content">1</div> 
<div class="content">2</div> 
<div class="content">3</div> 
<div class="content">4</div> 
<div class="content">5</div> 


. </div> 
.content{ </body> 
width: 100px; </html> 


代码 的 运行 结果 如 图 10-10 所 示 。 


项 目 1 项 目 2 项 目 3 项 目 4 项 目 5 


(3) align-items 


图 10-10 


align-items 设置 或 检索 弹性 盒子 元 素 在 侧 轴 〈 纵 轴 ) 方向 上 的 对 齐 方式 。 


语法 描述 : 


align-items: flex-start | flex-end | center | baseline | stretch 


align 一 items 属性 的 值 有 以 下 几 种 : 

@ flex-start: 弹性 盒子 元 素 的 侧 轴 ( 纵 轴 ) 起 始 位 置 的 边界 紧 靠 住 该 行 的 
侧 轴 起 始 边 界 。 

@ ”flex-end: 弹性 盒子 元 素 的 侧 轴 “《〈 纵 轴 ) 起 始 位 置 的 边界 紧 靠 住 该 行 的 侧 
轴 结 束 边界 。 


@ center: 弹性 盒子 元 素 在 该 行 侧 轴 ( 纵 轴 ) 上 的 居中 放置 《如果 该 行 的 尺 
才 小 于 弹性 盒子 元 素 的 尺寸 ， 则 会 向 两 个 方向 溢出 相同 的 长 度 ) 。 


@ baseline: 如 弹性 盒子 元 素 的 行内 轴 与 侧 轴 为 
棕 效 。 在 其 他 情况 下 ， 该 值 将 参与 基线 对 齐 。 


一 条 , 则 该 值 与 “fex-start” 


ol 


@ stretch: 如 果 指 定 侧 轴 大 小 的 属性 值 为 auto"， 则 其 值 会 使 项 目的 边 距 
盒 的 尺寸 尽 可 能 接近 所 在 行 的 尺寸 ， 但 同时 会 遵循 ”min/max-width/ 


height” 属性 的 限制 。 


小 试 身手 : 检索 弹性 盒子 元 素 对 齐 方式 


align-items 属性 的 使 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.container{ 

width: 1200px; 

height: 500px; 
border:5px red solid; 
display:flex; 
justify-content: space-around; 
align-items: flex-start; 

上 

.content{ 

width: 100px; 

height: 100px; 
background: lightpink; 
color:#fff; 

font-size: 50px; 
text-align: center; 
line-height: 100px; 

} 

:C1{ 

height: 100px; 


示例 代码 如 下 所 示 。 


区 


代码 的 运行 结果 如 


10-11 一 氏 


10-15 所 示 。 


height: 150px; 

} 

.C3{ 

height: 200px; 

.C4{ 

height: 250px; 

} 

of 

height: 300px; 

} 

</style> 

</head> 

<body> 

<div class="container"> 

<div class="content c1">1</div> 
<div class="content c2">2</div> 
<div class="content c3">3</div> 
<div class="content c4">4</div> 
<div class="content c5">5</div> 
</div> 

</body> 

</html> 


10-11 ( 默认 值 flex-start ) 
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图 10-14 ( baseline ) 


图 10-15 ( stretch ) 


(4) flex-wrap 
flex-wrap 属性 规定 flex 容器 是 单行 或 者 多 行 , 同时 横 轴 的 方向 决定 了 新 行 堆 芭 的 方向 。 


语法 描述 : 
flex-wrap: nowrap| wrap|wrap-reverse |initial |inherit; 


fiex-wrap 属性 的 值 有 以 下 几 种 : 
e@ nowrap-: 默认 情况 下 ， 弹 性 容器 为 单行 。 该 情况 下 弹性 子 项 可 能 会 溢出 
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容器 。 
@ wrap-: 弹性 容器 为 多 行 。 该 情况 下 ， 弹 性 子 项 溢出 的 部 分 会 被 放置 到 新 
行 ， 子 项 内 部 会 发 生 断 行 。 
@ wrap-reverse-: 反 转 wrap 排列 。 
小 试 身手 : 显示 单行 或 者 多 行 的 效果 


flex-wrap 属性 用 法 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.Container{ 

width: 500px; 

height: 500px; 

border:5px red solid; 
display:flex; 

justify-content: space-around; 
flex-wrap: nowrap; 

} 

.content{ 

width: 100px; 

height: 100px; 

background: lightpink; 
color:#fff; 

font-size: 50px; 

text-align: center; 
line-height: 100px; 

} 

</style> 

</head> 

<body> 

<div class="container"> 

<div class="content">1</div> 
<div class="content">2</div> 
<div class="content">3</div> 
content">4</div> 


content">5</div> 
<div class="content">6</div> 
<div class="content">7</div> 
<div class="content">8</div> 
<div class="content">9</div> 


<div class="content">10</div> 
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</div> 
</body> 
</html> 


代码 的 运行 效果 如 图 10-16 所 示 。 


x 
C 0 0 Dfle//C/sers/Administrator/Deskt$ 9 5- 三 


2 5 0 7 3 10 
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通过 以 上 代码 运行 结果 可 以 看 出 ， 在 默认 属性 值 nbowrap 的 作用 下 ， 即 便 是 内 容 已 经 
完全 被 压缩 了 ， 也 不 会 进行 换行 操作 ， 所 以 希望 内 容 正常 地 在 容器 内 显示 ， 可 以 添加 CSS 
代码 。 

添加 的 CSS 代码 如 下 : 

flex-wrap: wrap; 

代码 的 运行 效果 如 图 10-17 所 示 。 

+ 


机 二 
C OO 0 © fle///c/Users/Administrator/Deskt # [= ?2 


O20.405 


[en 
me 
Co 
< 
一 
SS 
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(5) align-content 

align-content 属性 用 于 修改 flex-wrap 属性 的 行为 。 类 似 于 align-items, 但 它 不 是 设置 
弹性 子 元 素 的 对 齐 ， 而 是 设置 各 个 行 的 对 齐 。 

语法 描述 ， 


align-content: flex-start | flex-end | center | space-between | space-around | stretch 


aligm-content 属性 的 值 有 以 下 几 种 : 

@ flex-start: 各 行 向 弹性 盒 容器 的 起 始 位 置 堆 芭 。 

flex-end: 各 行 向 弹性 盒 容 器 的 结束 位 置 堆 苇 。 

center: 各 行 向 弹性 盒 容 器 的 中 间 位 置 堆 翅 。 

space-between: 各 行 在 弹性 盒 容器 中 平均 分 布 。 

space-around: 各 行 在 弹性 盒 容器 中 平均 分 布 ， 两 端 保留 子 元 素 与 子 元 素 
之 间 间 距 大 小 的 一 半 。 

@ stretch: 默认 。 各 行将 会 伸展 以 占用 剩余 空间 。 


国 10.2.3 ”对 子 级 内 容 的 设置 


flex-box 布局 不 仅 是 对 父 级 容器 的 设置 ， 对 于 子 级 元 素 也 可 以 设置 它们 的 属性 ， 本 节 
介绍 的 属性 是 flex( 用 于 指定 弹性 子 元 素 如 何 分 配 空间 ) 和 order( 用 整数 值 来 定义 排列 顺序 ， 
数值 小 的 排 在 前 面 ) 。 

(1) flex 

flex 属性 用 于 设置 或 检索 弹性 盒子 模型 对 象 的 子 元 素 如 何 分 配 空间 ， 是 Hex-grow、 
flex-shrink 和 flex-basis 属性 的 简写 属性 。 

语法 描述 : 


flex: flex-grow flex-shrink flex-basis|auto |initial |inherit; 


flex 属性 值 的 解释 如 下 : 

@ flex-grow: 一 个 数字 ， 规 定 项 目 相 对 于 其 他 灵活 的 项 目 进行 扩展 的 量 。 

@ ”flex-shrink: 一 个 数字 ， 规 定 项 目 相对 于 其 他 灵活 的 项 目 进行 收缩 的 量 。 

@ flex-basis: 项 目的 长 度 。 合 法 值 : auto、inherit 或 一 个 后 跟 %、px、em 
或 任何 其 他 长 度 单位 的 数字 。 

®@ auto: 与 11 auto 相同 。 

@ initial: 设置 该 属性 为 它 的 默认 值 ， 即 为 01 auto。 

@ inherit: 从 父 元 素 继承 该 属性 。 


小 试 身手 : 检索 盒子 对 象 的 子 元 素 所 占 的 空间 


flex 属性 用 法 的 代码 如 下 : 


<!DOCTYPE html> 


弹性 盒子 模型 


<html lang="en"> line-height: 100px; 

<head> h 

<meta charset="UTF-8"> 2 

<title>Document</title> background: lightblue; 

<style> 上 

.Container{ .C3{ 

‘width: 500px; background: yellowgreen 
height: 500px; } 

border:5px green solid; </style> 

display:flex; </head> 

/*justify-content: space-around;*/ <body> 

flex-wrap: wrap; <div class="container"> 

机 <div class="content c1">1</div> 
,Content{ <div class="content c2">2</div> 
height: 100%; <div class="content c3">3</div> 
background: lightpink; <div class="content c4">45678910</div> 
color:#fff; </div> 

font-size: 5Opx; </body> 

text-align: center; </html> 


代码 的 运行 效果 如 图 10-18 所 示 。 


C Ov © filey//c/sers/Administrator/Deskt # 9 5”- 三 


1234567891 


图 10-18 


此 时 所 看 见 的 结果 是 所 有 的 子 级 div 宽度 都 是 由 自身 的 内 容 决定 的 ， 如 果 想 要 它们 平 
均 分 配 父 级 容器 的 空间 则 需要 为 其 添加 CSS 代码 : 
flex: 1; 


代码 的 运行 效果 如 图 10-19 所 示 。 


17271173 


C 个 人 © fle///C/Users/Administrator/Deskt: # 0 2- 三 
时 
图 10-19 
(2) order 
order 属性 设置 或 检索 弹性 盒 模型 对 象 的 子 元 素 出 现 的 顺序 。 
语法 描述 ， 


order: number |initial |inherit; 


order 属性 值 的 解释 如 下 : 

e@ number: 默认 值 是 0。 规 定 灵活 项 目的 顺序 。 
@ ”Initial: 设置 该 属性 为 它 的 默认 值 。 

@ Inherit， 从 父 元 素 继承 该 属性 。 


小 试 身手 : 检索 对 象 子 元 素 的 出 现 顺序 
order 属性 用 法 的 代码 如 下 : 


<!DOCTYPE html> 


<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

.container{ 

width: 500px; 

height: 500px; 
border:5px red solid; 
display:flex; 
justify-content: space-around; 
} 

.content{ 

width: 100px; 

height: 100px; 


弹性 盒子 模型 


background: lightpink; 
color:#fff; 

font-size: 50px; 

text-align: center; 

line-height: 100px; 

} 

| 

background: lightblue; 

3 

C3{ 

background: yellowgreen; 

J 

cA{ 

background: coral; 

</style> 

</head> 

<body> 

<div class="container"> 

<div class="content c1">1</div> 
<div class="content c2">2</div> 
<div class="content c3">3</div> 
<div class="content c4">4</div> 
</div> 

</body> 

</html> 


代码 的 运行 效果 如 图 10-20 所 示 。 


o x 
CC OO OO fe///c/Users/Administrator/Deskt # 9 5: 三 


图 10-20 
代码 未 对 子 级 div 设置 order 属性 ， 但 也 是 正常 显示 在 页 面 中 ， 当 对 子 级 div 加 入 了 
CSS 代码 order 属性 之 后 ， 再 看 一 下 它们 的 排列 顺序 。 
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代码 如 下 : 


C1{ 
Order:3; 
[~ 3 
‘2{ C OO oO Bfile//C/Usery/Administrator/Deskt # 9 2- 
background: lightblue; 本 
order:1; 

} 

.c3{ 

background: yellowgreen; 


口 


Ml x 


order:4; 

} 

.C4{ 

background: coral; 
order:2; 


} 
代码 的 运行 效果 如 图 10-21 所 示 。 


10-21 


| 10.3 “课堂 练习 | 


根据 之 前 所 学 的 弹性 盒子 知识 ， 制 作出 如 图 10-22、 图 10-23 所 示 的 效果 。 
正常 排序 的 效果 如 图 10-22 所 示 。 


口 pocument x 
C | © flley//C/Users/Administrator/Desktop/Untitle.. 会 | : 


10-22 


加 入 flex-direction: row-reverse 之 后 的 排序 效果 如 图 10-23 所 示 。 


弹性 盒子 模型 


GC |© file///C/Users/Administrator/Desktop/Untitie..， 从 


E 


图 10-23 
提示 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style type="text/css"> 
.Container{ 
display: -webkit-flex; 
display: flex; 
/*-webkit-flex-direction:row-reverse;*/【 使 用 flex-direction 属性 ， 将 能 控制 子 元 素 盒子 排序 】 
/*flex-direction: row-reverse;*/ 
width: 400px; 
height: 250px; 
background-color:lightblue; 
} 
‘flex-item{width: 100px;height: 100px; margin: 10px; background-color: lightyellow;} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="flex-item"> 盒子 1</div> 
"flex-item"> 盒子 2</div> 
flex-item"> 盒子 3</div> 
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强化 训练 


多 级 菜单 的 设计 方法 有 很 多 种 ， 一 般 使 用 JavaScript 来 实现 。 也 可 以 使 用 CSS2 设计 
多 级 菜单 ， 但 是 兼容 性 比较 差 ， 使 用 较 少 ， 下 面 使 用 CSS3 设计 一 个 比较 经 典 的 下 拉 菜 单 。 
设计 效果 如 图 10-24 所 示 。 


图 10-24 


操作 提示 : 
本 章 的 强化 练习 综合 运用 了 弹性 盒子 、 父 级 容器 设置 和 子 级 内 容 设置 等 技术 。 
HTML 部 分 代码 如 下 : 
<ulid="nav"> 
<liclass="current"><a href="#"> 首页 </a></li> 
<li><a href="#"> 新 闻 >></a> 
<ul> 
<li><a href="#"> 国际 新 闻 </a></li> 
<li><a href="#'> 国内 新 闻 >></a> 
<ul> 
<li><a href=" 扩 "> 地 方 新 闻 </a></li> 
<li><a href="#"> 科技 新 闻 >></a> 
<ul> 
<li><a href="#"> 移动 互联 网 发 展 趋势 </a></li> 


<li><a href="#"> 云 计算 </a></li> 


</ul> 

</li> 

</ul> 

</li> 

</ul> 

</li> 

<li><a href="#"> 论坛 </a></li> 
<li><a href="#"'> 微 博 </a></li> 
</ul> 


= 三/ 士 ~ 
| 本 章 结束 语 | 
本 章 讲解 了 关于 CSS3 弹性 盒子 的 知识 ， 包 括 对 父 级 容器 的 属性 和 子 级 元 素 的 设置 ， 
每 个 属性 都 对 应 着 相应 的 CSS 规则 。 通 过 对 本 章 的 学 习 ， 在 今后 的 布局 中 会 有 更 多 的 方 
案 和 更 好 的 解决 手段 。 


CHAPTER 11 
颜色 渐变 和 


本 章 概 述 

渐变 背景 一 直 活 跃 在 Web 中 ， 以 前 需要 前 端 工程 师 和 设计 师 相配 
合 ， 再 通过 切 图 来 实现 ， 成 本 太 高 。CSS3 渐变 彻底 颠覆 了 之 前 的 
做 法 ， 其 中 转换 是 CSS3 中 具有 和 颠覆 性 的 特征 之 一 ， 可 以 实现 元 
素 的 位 移 、 旋 转 、 变 形 、 缩 放 ， 甚 至 支持 矩阵 方式 。 


图 学 习 目 标 
渐变 和 转换 对 浏览 器 的 支持 情况 。 
CSS3 中 线性 渐变 和 径 向 渐变 。 

2D 和 30 转换 的 应 用 效果 。 


图 课时 安排 
理论 知识 1 课时 。 
上 机 练习 1 课时 。 


知识 导 图 : 


! 析 全 
后 rims 
渐变 和 转换 浏览 器 的 支持 情况 


2D 转换 
3D 转换 


[3 汤 变 | 


渐变 是 颜 


间 的 平滑 过 渡 。 在 创建 过 程 中 ， 创 建 多 个 颜色 值 ， 使 多 个 颜色 之 


色 与 
间 实 现 平 ee 先 用 PS 做 简单 的 示意 ， 如 图 11-1 所 示 。 


预 设 ba 
pd a . 
| ~ Ez 


名 称 (N): 自 定 |。 新建 [W) 
浙 变 类 到 :| 交底 ~ 


不 遂 明 针 % 检查 % 竹 款 (D) 
位 秆 (Gj; [本 ]% | Who) | 


图 11-1 


图 上 被 红色 框框 选 的 部 分 就 是 渐变 效果 。 可 以 看 出 ， 在 红色 与 黄色 、 黄 色 和 绿色 之 间 


的 颜色 都 是 平滑 过 渡 


的 。 而 CSS3 渐变 也 是 这 种 原理 。 


CSS3 定义 了 两 种 类 型 的 渐变 〈gradients) : 


e@ 线性 渐变 
e 径 向 渐变 


国 11.1.1 浏 


(Linear Gradients) : 向 下 /向 上 /向 左 / 向 右 /对 角 方 向 。 
(Radial Gradients) : 由 它们 的 中 心 定义 。 


览 器 支持 


最 早 实现 对 CSS3 渐变 支持 的 浏览 器 是 -Webkit- 内 核 的 浏览 器 ， 随 后 Firefox 和 Opera 
浏览 器 也 开始 支持 。 但 是 众多 浏览 器 之 间 并 没有 统一 起 来 ， 在 使 用 时 仍然 需要 加 上 浏览 器 
厂商 的 前 级 ( 见 表 11-1) 。 


表 11-1 各 大 浏览 器 厂商 的 支持 情况 


repeating-radial- 
gradient 


属性 IE Firefox Chrome Sfari Opera 
26.0 16.0 6.1 12.1 
Linear-gradient 10.0 
10.0-webkit- 3.6 -moz- 5.1-webkit- 11.1 -0- 
26.0 16.0 6.1 12.1 
Radial-gradient 10.0 
10.0-webkit- 3.6 -moz- 5.1-webkit- 11.1 -o- 
a 26.0 160 61 121 
repeating-linear- 100 
gradient 
11.1 -0- 
12.1 
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颜色 渐变 和 图 形 转换 


国 11.1.2 线性 渐变 


先 从 最 简单 的 线性 渐变 开始 ， 想 要 实现 最 简单 的 渐变 需要 定义 两 个 颜色 值 ， 一 个 颜色 
作为 渐变 的 起 点 ， 另 外 一 个 作为 渐变 的 终点 。 

线性 渐变 的 属性 为 lnear-gradient， 默 认 渐 变 的 方向 为 从 上 至 下 。 

语法 : 

background: linear-gradient(direction, color-stop1, color-stop2, ...); 


小 试 身手 : 绘制 线性 渐变 的 方法 
线性 渐变 的 代码 如 下 : 


<!IDOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

width: 200px; 

height: 200px; 
background:-ms-linear-gradient(120deg, pink,lightblue,yellowgreen, red); 
background:-webkit-linear-gradient(120deg,pink,lightblue,yellowgreen,red); 
background:-o-linear-gradient(120deg, pink,lightblue,yellowgreen, red); 
background:-moz-linear-gradient(120deg,pink,lightblue,yellowgreen,red); 
background:linear-gradient(120deg,pink, lightblue,yellowgreen,red); 

1 

</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


代码 的 运行 效果 如 图 11-2 所 示 。 


图 11-2 
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国 11.1.3 ” 径 向 渐变 


径 向 渐变 是 呈 圆 形 的 向 外 进行 渐变 的 操作 。 

创建 一 个 径 向 渐变 ， 至 少 需要 定义 两 种 颜色 结 点 。 颜 色 结 点 即 想 要 呈现 平稳 过 渡 的 颜 
色 。 也 可 以 指定 渐变 的 中 心 、 形 状 〈 圆 形 或 椭圆 形 )、 大 小 。 默 认 情 况 下 ， 渐 变 的 中 心 是 
center〈 表 示 在 中 心 点 ) ， 渐 变 的 形状 是 ellipse (表示 椭圆 形 〉， 渐 变 的 大 小 是 farthest- 
corner (表示 到 最 远 的 角落 ) 。 

壮志 


background: radial-gradient(center, shape size, start-color, ..., last-color); 


小 试 身手 : 绘制 径 向 渐变 的 方法 
径 向 渐变 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang=” en” > 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style> 
div{ 
width: 200px; 
height: 200px; 
background:-ms-radial-gradient(pink,lightblue,yellowgreen); 
background:-webkit-radial-gradient(pink,lightblue,yellowgreen); 
background:-o-radial-gradient(pink,lightblue,yellowgreen); 
background:-moz-radial-gradient(pink,lightblue,yellowgreen); 
background:radial-gradient(pink,lightblue,yellowgreen); 
} 
</style> 


</head> (DS pT 
a © §] CNUsersAdministrat 只- 0 | 恒 径 向 浙 绊 


<div></div> 
</body> 
</html> 


代码 的 运行 效果 如 图 11-3 所 示 。 


图 11-3 
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| 112 2D 转换 | 


转换 是 CSS3 中 具有 颠覆 性 的 特征 之 一 ， 可 以 实现 元 素 的 位 移 、 旋 转 、 变 形 、 缩 放 ， 
甚至 支持 矩阵 方式 。 以 前 想 要 在 网 页 中 做 出 动画 效果 ， 需 要 借助 一 些 类 似 于 flash 的 插件 
才 可 以 完成 ，CSS3 的 转换 功能 ， 使 得 开发 再 次 变 得 简单 起 来 。 首 先 ， 了 解 浏览 器 的 支持 
情况 。 

目前 CSS3 转换 属性 的 浏览 器 支持 情况 还 算 理 想 , 绝 大 部 分 浏览 器 都 已 经 支持 此 属性 。 
正 9 需要 加 上 浏览 器 厂商 前 级 -ms-，IE9 之 后 都 可 以 直接 使 用 标准 属性 。 表 11-2 是 各 大 浏 
览 器 厂商 的 支持 情况 。 


表 11-2 各 大 浏览 器 厂商 的 支持 情况 


23.0 
36.0 


Transform 3.2-webkit- 15.0-webkit- 
4.0-webkit- 


12.110.5 -0- 


注 : 表格 中 的 数字 表示 支持 该 属性 的 第 一 个 浏览 器 版 本 号 。 
紧 跟 在 -webkit-, -ms- 或 -moz- 前 的 数字 为 支持 该 前 缀 属性 的 第 一 个 浏览 器 版 本 号 。 


国 11.2.1 移动 translate() 


translate() 方法 ,根据 左 (X 轴 ) 和 顶部 (Y 轴 ) 位 置 给 定 的 参数 ， 从 当前 元 素 位 置 移动 。 


小 试 身手 : 让 网 页 中 的 元 素 动 起 来 


translate() 使 用 方法 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>2D 转换 </title> 
<style> 

div{ 

width: 200px; 

height: 200px; 
background: #CF3; 
transform: translate(100px,50px); 


} 

</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


代码 的 运行 效果 如 图 11-4 所 示 。 
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AUsers\Administrat 内 ~ 上 | 夸 translate0) 


图 11-4 


国 11.2.2 旋转 rotate() 


rotate() 方法 : 在 一 个 给 定 度数 | 
旋转 。 


顺 时 针 旋 转 的 元 素 ， 人 允许 负 值 ， 这 样 就 是 元 素 逆 时 针 


小 试 身手 : 让 元 素 在 页 面 中 旋转 


rotate() 使 用 方法 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title> 旋转 rotate()</title> 
<style> 

div{ 

width:300px; 
height:300px; 
background: #CFO; 
margin:100px; 

} 

div:hover{ 

transform: rotate(45deg); 
} 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


颜色 渐变 和 图 形 转换 


代码 的 运行 效果 如 图 11-5 所 示 。 


[© Se rr 


图 11-5 


国 11.2.3 ”缩放 scale() 


scale() 方法 ， 该 元 素 增 加 或 减少 的 程度 ， 取 决 于 宽度 (X 轴 ) 和 高 度 (Y 轴 ) 的 参数 。 
通过 此 方法 可 以 对 页 面 中 的 元 素 进行 等 比例 的 放大 和 缩小 ， 还 可 以 指定 物体 缩放 的 中 心 。 


小 试 身手 : 元 素 缩放 的 操作 方法 


scale() 使 用 方法 的 代码 如 下 : 


<!DOCTYPE html> transform: scale(0.5); 


.C3{ 


<html lang="en"> 

<head> ! </style> 

<meta charset="UTF-8"> | </head> 

<title> 缩放 scale()</title> : <body> 

<style> | <div class="al"></div> 
div{ | <div class="b2"></div> 
width:100px; | <div class="c3"></div> 
height:100px; } </body> 

background: #9F0; ! </html> 
0 ， 代码 的 运行 效果 如 图 11-6 所 示 。 
.al{ | 

transform: scale(1,1); ! 

} | 

.b2{ ! 

transform: scale(1.5,1); : 

1 | 
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从 代码 的 运行 效果 可 以 看 出 ， 为 每 个 div 都 是 设置 了 相同 的 宽 高 属性 ， 但 因为 各 自 的 
缩放 比例 不 同 ， 它 们 显示 在 页 面 中 的 结果 也 是 不 一 样 的 。 

从 效果 中 还 可 以 发 现 ， 所 有 的 div 缩放 其 实 都 是 从 中 心 进行 的 ， 缩 放 操作 的 默认 中 心 
点 就 是 元 素 的 中 心 。 这 个 缩放 的 中 心 是 可 以 通过 transform-origin 属性 改变 的 。 

语法 描述 : 


transform-origin: x-axis y-axis z-axis; 


小 试 身手 : 设置 缩放 的 中 心 点 
transform-origin 属性 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title> transform-origin 属性 </title> 

<style> 

div{ 

width: 200px; 

height: 200px; 

transform-origin: 0 0; 

margin:10px auto; 

} 

.al{ 

transform: scale(1,1); 
background: blue; 

} 

.b2{ 

transform: scale(1.5,1); 

background: red; 
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} 

ec 

transform: scale(0.5); 
background: green; 

} 

</style> 

</head> 

<body> 

<div class="al"></div> 
<div class="b2"></div> 
<div class="c3"></div> 
</body> 

</html> 


同样 的 代码 ， 只 是 改变 了 元 素 转换 的 位 置 ， 即 可 完成 类 似 于 柱状 图 的 操作 。 


代码 的 运行 效果 如 苞 


11-7 所 示 。 


图 11-7 


国 11.2.4 倾斜 skew() 


倾斜 skew0 方法 ， 包 含 两 个 参数 值 ， 分 别 表示 XX 轴 和 YY 轴 倾 斜 的 角度 ， 如 果 第 二 个 


语法 描述 : 


参数 为 空 ， 则 默认 为 0， 参 数 为 负 ， 表 示 向 相反 方向 倾斜 。 


transform:skew(<angle> [,<angle>]); 


小 试 身手 : 元 素 倾斜 的 设计 方法 


skew() 使 用 方法 的 代码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title> 倾斜 skew() </title> 


transform: skew(30deg); 
background: red; 

1 

.C3{ 

transform: skew(50deg); 


<style> background: green; 

div{ 

width: 200px; </style> 

height: 200px; </head> 

margin:10px auto; <body> 

} <div class="al"></div> 

.al{ <div class="b2"></div> 

background: blue; <div class="c3"></div> 

} </body> 

.b2{ </html> 
代码 的 运行 效果 如 图 11-8 所 示 。 


fr 


[a 
EECEO EC 


图 11-8 


| 113 3D 转 换 | 


是 通过 transform 属性 


国 11.3.1 


在 CSS3 中 ， 除 了 2D 转换 ， 还 可 以 用 3D 转换 来 完成 酷 炫 的 网 页 特效 ， 这 些 操作 也 


来 完成 的 。 


rotateX() 方法 


川 


rotateX0 方法 ， 围 绕 


在 一 个 给 定 度数 的 义 轴 旋转 的 元 素 。 
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颜色 渐变 和 图 形 转换 


这 个 方法 与 之 前 的 2D 转换 方法 rotate0 不 
rotateX0 方法 是 让 元 素 在 孔 内 旋转 ， 也 就 是 它 
rotateX0 使 用 方法 的 代码 如 下 : 


<!IDOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

width: 200px; 

height: 200px; 
background: red; 
margin:20px; 

color:#fff; 

font-size: 50px; 
line-height: 200px; 
text-align: center; 
transform-origin: 0 0; 
float: left; 

} 

.d1{ 

transform: rotateX(40deg); 
} 

</style> 

</head> 

<body> 

<div>3D 旋转 </div> 
<div class="d1">3D 旋转 </div> 
</body> 

</html> 


代码 的 运行 效果 如 图 11-9 所 示 。 


同 的 是 , rotate0 方式 是 让 元 素 在 平面 内 旋转 ， 
让 元 素 在 和 X 轴 上 进行 旋转 。 
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3D 旋 转 


3D 旋 转 


图 11-9 


代码 在 页 面 中 写 入 了 两 个 面积 相等 的 div, 并 
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对 第 二 个 div 进行 了 3D 旋转 操作 ,结果 ， 


元 素 明显 产生 了 变化 ， 这 就 是 3D 旋转 中 沿 义 轴 旋 转 的 效果 。 


国 11.3.2 rotateY() 方法 


rotateY0 方 法， 围绕 其 在 一 个 给 定 度数 的 Y 轴 旋 转 的 元 素 。 


rotaterY() 使 用 方法 的 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title>Document</title> 
<style> 

div{ 

width: 200px; 

height: 200px; 
background: red; 
margin:20px; 

color:#fff; 

font-size: 50px; 
line-height: 200px; 
text-align: center; 


transform-origin: 00; 


代码 的 运行 效果 如 图 11-10 所 示 。 


DD Document x 


3D 旋 转 


图 11-10 


转 11.3.3 ”转换 属性 
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3D 旋 转 


float: left; 

.d1{ 

transform: rotateX(40deg); 

. 

.d2{ 

transform: rotateY(50deg); 

$ 

</style> 

</head> 

<body> 

<div>3D 旋转 </div> 

<div class="d1">3D 旋转 </div> 
<div class="d2">3D 旋转 </div> 
</body> 

</html> 


3D 旋 转 


CSS3 规定 可 以 使 
(1) transform 属性 

2D 转换 、3D 转换 。 
(2) transform-origin 属性 
允许 改变 转换 的 位 置 。 


问 元 条 应 


些 转 换 的 属性 来 设置 转换 的 效果 。 


颜色 渐变 和 图 形 转换 


(3) transform-style 属性 

规定 元 素 如 何在 3D 空间 中 显示 。 

语法 格式 : 

flatlpreserve-3d; 

属性 的 值 可 以 是 以 下 两 种 : 

flat 表示 所 有 子 元 素 在 2D 平面 上 呈现 。 
preserve-3d 表示 所 有 子 元 素 在 3D 空间 中 呈现 。 
案例 代码 如 下 : 


<!DOCTYPE html> 
<html> 


<head> 

<meta charset="utf-8"> 
<title>document</title> 
<style> 

#d1 

{ 

position: relative; 

height: 200px; 

‘width: 200px; 

margin: 100px; 
padding:10px; 

border: 1px solid black; 

i 

#d2 

{ 

padding:50px; 

position: absolute; 

border: 1px solid black; 
background-color: red; 
transform: rotateY(60deg); 
transform-style: preserve-3d; 
-webkit-transform: rotateY(60deg); /* Safariand Chrome */ 
-webkit-transform-style: preserve-3d; /* Safari and Chrome */ 
} 

#d3 

{ 

padding:40px; 

position: absolute; 

border: 1px solid black; 
background-color: yellow; 
transform: rotateY(-60deg); 
-webkit-transform: rotateY(-60deg); /* Safari and Chrome */ 
} 

</style> 


</head> 

<body> 

<div id="d1"> 

<div id="d2">HELLO 

<div id="d3">world</div> 
</div> 

</div> 

</body> 

</html> 


代码 的 运行 效果 如 图 11-11 所 示 。 


DD document X 
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(4) perspective 属性 
多 少 像素 的 3D 元 素 是 从 视图 的 perspective 属性 定义 。 这 个 属性 允许 改变 3D 元 素 是 
怎样 查看 透视 图 。 定 义 时 的 perspective 属性 ， 它 是 一 个 元 素 的 子 元 素 ， 而 不 是 元 素 本 身 。 
需要 说 明 的 是 ，perspective 属性 只 影响 3D 转换 元 素 。 
语法 格式 : 
perspective: numberlnone: 
perspective 属性 的 值 可 以 是 以 下 两 种 : 
e@ number: 元 素 距离 视图 的 距离 ， 以 像素 计 。 
@ none: 默认 值 。 与 0 相同 。 不 设置 透视 。 
perspective-origin 属性 定义 3D 元 素 所 基于 的 X 轴 和 YY 轴 。 该 属性 允许 改变 3D 元 素 
的 底部 位 置 。 当 为 元 素 定义 perspective-origin 属性 时 ， 其 子 元 素 会 获得 透视 效果 ， 而 不 是 
元 素 本 身 。 该 属性 必须 与 perspective 属性 一 同 使 用 ， 而 且 只 影响 3D 转换 元 素 。 
语法 格式 : 


perspective-origin: x-axis y-axis; 
案例 代码 如 下 : 


<!IDOCTYPE html> 
<html> 

<head> 

<style> 

#divi{ 
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颜色 渐变 和 图 形 转换 


position: relative; 

height: 150px; 

width: 150px; 

margin: 50px; 

padding:10px; 

border: 1px solid black; 
perspective:150; 
-webkit-perspective:150; /* Safari and Chrome */ 
站 

#div2{ 

padding:50px; 

position: absolute; 

border: 1px solid black; 
background-color: pink; 
transform: rotateX(45deg); 
-webkit-transform: rotateX(45deg); /* Safariand Chrome */ 
} 

</style> 

</head> 

<body> 

<div id="div1"> 

<div id="div2">3D 转换 </div> 
</div> 

</body> 

</html> 


代码 的 运行 效果 如 图 11-12 所 示 。 


/ 口 31-10.html 
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(5) backface-visibility 属性 
backface-visibility 属性 定义 当 元 素 不 面向 屏幕 时 是 否 可 见 。 若 在 旋转 元 素 时 不 想 看 到 
其 背面 ， 则 使 用 该 属性 。 


语法 格式 : 

backface-visibility: visible |hidden; 
backface-visibility 属性 的 值 可 以 是 以 下 两 种 : 
Visible: 背面 是 可 见 的 。 

Hidden: 背面 是 不 可 见 的 。 


11.3.4 3D 转换 方法 


CSS3 中 关于 3D 转换 的 方法 和 2D 转换 的 方法 基本 类 似 。 这 里 不 再 缆 述 。 
表 11-3 中 列 出 了 所 有 的 3D 转换 方法 
表 11-3 ”3D 的 转换 方法 


本 人 定义 3D 转换 ， 使 用 16 个 值 的 4x 4 矩阵 
定义 3D 转化 
定义 3D 转化 ， 仅 使 用 用 于 义 轴 的 值 
定义 3D 转化 ， 仅 使 用 用 于 YY 轴 的 值 
定义 3D 转化 ， 仅 使 用 用 于 乙 轴 的 值 
定义 3D 缩放 转换 
定义 3D 缩放 转换 ， 通 过 给 定 一 个 X 轴 的 值 
定义 3D 缩放 转换 ， 通 过 给 定 一 个 Y 轴 的 什 
定义 3D 缩放 转换 ， 通 过 给 定 一 个 Z 轴 的 值 
定义 3D 旋转 
定义 沿 买 轴 的 3D 旋转 
定义 沿 Y 轴 的 3D 旋转 
定义 沿 Z 轴 的 3D 旋转 
定义 3D 转换 元 素 的 透视 视图 


| 11.4 ”课堂 练习 | 


将 matrix0 方法 和 2D 变换 方法 合并 成 一 个 。matrix 0 方法 包含 旋转 、 缩 放 、 移 动 (3 


移 ) 和 倾斜 ， 效 果 如 图 11-13 所 示 。 


和 CNUserswdministrat D ~ © 


图 11-13 
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颜色 渐变 和 图 形 转换 


代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 合并 matrix()</title> 

<style> 

div 

Width:200px; 

height:175px; 

background-color: #9F0; 

border:1px solid black; 

加 

div#div2 

{ 

transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ 
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safariand Chrome */ 
transform:matrix(0.866,0.5,-0.5,0.866,0,0); 

出 

</style> 

</head> 

<body> 

<div> 这 是 合并 matrix() 的 用 法 .</div> 

<div id="div2"> 这 是 合并 matrix() 的 用 法 .</div> 
</body> 

</html> 


强化 让 


练 


本 章 的 强化 训练 为 大 家 准备 了 如 图 11-14 所 示 的 太极 图 ， 


@ 


@-webkit-keyframes 的 属性 知识 完成 运动 效果 。 


图 11-14 


操作 提示 : 
提示 代码 如 下 : 


@keyframes rotation { 
0% {transform:rotate(Odeg);} 
100% {transform:rotate(-360deg);} 
@-webkit-keyframes rotation { 
0% {-webkit-transform:rotate(Odeg);} 
100% {-webkit-transform:rotate(-360deg);} 
} 
@-moz-keyframes rotation { 
0% {-moz-transform:rotate(Odeg);} 
100% {-moz-transform:rotate(-360deg);} 


本 章 结束 语 
[ | 


区 


各 
问 


动 的 。 根 据 


章 主要 讲解 了 CSS3 渐变 ， 包 括 线性 渐变 和 径 向 渐变 以 及 转换 功能 ， 并 讲解 了 从 这 些 


渐变 中 衍生 出 来 的 更 多 的 灵活 操作 。 具 备 了 CSS3 


变 和 转换 功能 ， 会 让 


必 亦 得 


友之 何 


更 加 灵活 
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知识 导 图 : 


(| 
JavaScript 


Ne 


本 章 概 述 
JavaScript 是 一 种 属于 网 络 的 脚本 语言 ， 已 被 广泛 用 于 Web 应 
开发 ， 常 用 来 为 网 页 添加 各 式 各 样 的 动态 功能 ， 和 流畅 美观 的 济 
览 效果 。 通 常 JavaScript 脚本 是 通过 艇 入 在 HTML 中 来 实现 自身 
功能 的 。 


转 学 习 目 标 

了 解 JavaScript 的 发 展 以 及 应 用 方向 。 
学 会 JavaScript 的 用 法 。 

掌握 JavaScript 的 基本 语法 。 

掌握 JavaScript 的 事件 分 析 。 


图 课时 安排 
理论 知识 2 课时 。 
上 机 练习 1 课时 。 


Javascript 的 发 展 
JavaScript 的 特点 

Javascript 入 门 ”| 中。 Javascript 应 用 方向 
Javascript 的 用 法 


数据 类 型 


常量 和 变量 


JavaScript 的 基本 语法 | ”运算 符 和 表达 式 


基本 语句 


事件 类 型 
i 
事件 处 理 


JavaScript 事件 分 析 
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是 2.1 JavaScript Xi 


JavaScript 是 一 种 直译 式 脚 本 语言 ， 是 一 种 动态 类 型 、 弱 类 型 、 基 于 原型 的 语言 ， 
内 置 支持 类 型 。 它 的 解释 器 被 称 为 JavaScript 引擎 ， 是 浏览 器 的 一 部 分 ， 广 泛 用 于 客户 
端的 脚本 语言 ， 最 早 是 在 HIML (标准 通用 标记 语言 下 的 一 个 应 用 ) 网 页 上 使 用 ， 为 其 
HTML 网 页 增加 动态 功能 。 


国 12.1.1 JavaScript 的 发 展 


JavaScript 是 甲骨 文公 司 的 注册 商标 。 最 初 由 Netscape 的 Brendan Eich 设计 。Ecma 国际 
以 JavaScript 为 基础 制定 了 ECMAScript 标准 。JavaScript 也 可 以 用 于 其 他 场合 ， 如 服务 器 端 
编程 。 完 整 的 JavaScript 实现 包含 三 个 部 分 : ECMAScript， 文 档 对 象 模型 ， 浏 览 器 对 象 模型 。 

Netscape 在 最 初 将 其 脚本 语言 命名 为 LiveScript， 后 来 Netscape 在 与 Sun 合作 之 后 
将 其 改名 为 JavaScript。JavaScript 最 初 受 Java 启发 而 开始 设计 ， 目 的 之 一 就 是 “看 上 去 
像 Java”， 因 此 语法 上 有 类 似 之 处 ， 一 些 名 称 和 命名 规范 也 源 自 Java。 但 JavaScript 的 
主要 设计 原则 源 自 Self 和 Scheme。JavaScript 与 Java 名 称 上 的 近似 ， 是 当时 Netscape 为 
了 营销， 与 Sun 微 系 统 达成 协议 的 结果 。 为 了 取得 技术 优势 ， 微 软 推出 了 JScript 来 迎战 
JavaScript 的 脚本 语言 。 为 具备 互 用 性 ，ECMA 国际 (前 身 为 欧洲 计算 机 制造 商 协会 ) 创 
建 了 ECMA-262 标准 ECMAScript) 。 两 者 都 属于 ECMAScript 的 实现 。 尽 管 JavaScript 
作为 给 非 程序 人 员 的 脚本 语言 ， 而 非 作为 给 程序 人 员 的 脚本 语言 来 推广 和 宣传 ， 但 是 
JavaScript 具有 非常 丰富 的 特性 。 

发 展 初期 ，JavaScript 的 标准 并 未 确定 ， 而 是 Netscape 的 JavaScript、 微 软 的 JScript 
和 CEnvi 的 ScriptEase 三 足 鼎 立 。1997 年 , 在 ECMA (欧洲 计算 机 制造 商 协会 ) 的 协调 下 ， 
由 Netscape、Sun、 微 软 、Borland 组 成 的 工作 组 确定 统一 标准 : ECMA-262。 


国 12.1.2 ”JavaScript 的 特点 


JavaScript 是 一 种 属于 网 络 的 脚本 语言 ， 已 被 广泛 用 于 Web 应 用 开发 , 常用 来 为 网 页 
添加 各 式 各 样 的 动态 功能 和 提供 更 流畅 美观 的 浏览 效果 。 通 常 JavaScript 脚本 是 通过 嵌入 
在 HIML 中 来 实现 自身 功能 的 

JavaScript 脚本 语言 同 其 他 语言 一 样 ， 有 其 自身 的 基本 数据 类 型 、 表 达 式 和 算术 运算 
符 及 基本 程序 框架 。JavaScript 提供 了 四 种 基本 数据 类 型 和 两 种 特殊 数据 类 型 用 来 处 理 数 
据 和 文字 。 而 变量 提供 存放 信息 的 地 方 ， 表 达 式 则 可 以 完成 较 复杂 的 信息 处 理 。 

JavaScript 脚本 语言 具有 以 下 特点 。 

@ 脚本 语言 : JavaScript 是 一 种 解释 型 的 脚本 语言 .C、C++ 等 语言 是 先 编 
译 后 执行 , 而 JavaScript 是 在 程序 的 运行 过 程 中 逐 行进 行 解 释 。 

@ 基于 对 象 : JavaScript 是 一 种 基于 对 象 的 脚本 语言 . 它 不 仅 可 以 创建 对 象 ， 
也 能 使 用 现 有 的 对 象 。 

@ 简单 : JavaScript 语言 中 采用 的 是 弱 类 型 的 变量 类 型 , 对 使 用 的 数据 类 型 
未 做 出 严格 的 要 求 , 是 基于 Java 基本 语句 和 控制 的 脚本 语言 ， 设 计 简单 
紧凑 。 


JavaScript 入 门 必 学 


@ 动态 性 : JavaScript 是 一 种 采用 事件 驱动 的 脚本 语言 , 它 不 需要 经 过 
Web 服务 器 就 可 以 对 用 户 的 输入 做 出 响应 。 在 访问 一 个 网 页 时 , 鼠标 在 
网 页 中 点 击 或 上 下 移动 等 ，JavaScript 都 可 直接 对 这 些 事件 给 出 相应 的 
响应 。 
@ 跨 平台 性 : JavaScript 脚本 语言 不 依赖 于 操作 系统 , 仅 需 要 浏览 器 的 支持 。 
因此 一 个 JavaScript 脚本 在 编写 后 可 以 在 任意 机 器 上 使 用 , 前 提 是 浏览 器 
支持 JavaScript 脚本 语言 。JavaScript 已 被 目前 大 多 数 的 浏览 器 所 支持 。 
不 同 于 服务 器 端 脚本 语言 ， 例 如 PHP 与 ASP，JavaScript 主要 被 作为 客户 端 脚本 语言 
在 浏览 器 上 运行 ， 不 需要 服务 器 的 支持 。JavaScript 可 减少 对 服务 器 的 负担 ， 但 与 此 同时 
也 带 来 了 一 个 问题 : 安全 性 。 
随 着 服务 器 的 发 展 虽然 程序 员 更 喜欢 运行 于 服务 端的 脚本 ， 以 保证 安全 ， 但 
JavaScript 仍然 以 其 跨 平 台 、 容 易 上 手 等 优势 大 行 其 道 。 同 时 ， 有 些 特殊 功能 (如 AJAX) 
必须 依赖 JavaScript 在 客户 端的 支持 。 随 着 引擎 如 V8 和 框架 如 Nodejjs 的 发 展 ， 以 及 事件 
驱动 及 异步 IO 等 特性 ，JavaScript 逐渐 被 用 来 编写 服务 器 端 程序 。 


国 12.1.3 ” JavaScript 应 用 方向 


JavaScript 的 应 用 方向 主要 有 以 下 几 个 方面 。 
@ 嵌入 动态 文本 于 HTML 页 面 。 
对 浏览 器 事件 做 出 响应 。 
读 写 HTML 元 素 。 
在 数据 被 提交 到 服务 器 之 前 验证 数据 。 
检测 访客 的 浏览 器 信息 。 
控制 cookies， 包 括 创 建 和 修改 等 。 
基于 Nodejs 技术 进行 服务 器 端 编程 。 


国 12.1.4 JavaScript 的 用 法 


如 果 在 HTML 页 面 中 插入 JavaScript， 需 要 使 用 <script> 标签 。HTML 中 的 脚本 必须 
位 于 <script> 与 </script> 标签 之 间 。 脚 本 可 被 放置 在 HIML 页 面 的 <body> 和 <head> 部 
分 中 。<script> 和 </script> 之 间 的 代码 行 包 含 了 JavaScript: 


<script> 
alert(" 我 的 第 一 个 JavaScript"); 

</script> 

浏览 器 会 解释 并 执行 位 于 <script> 和 </script> 之 间 的 JavaScript 代码 。 

以 前 可 能 会 在 <scrip 亿 标签 中 使 用 type=”text/javascript”， 现 在 已 经 不 这 样 做 了 。 
JavaScrip 是 所 有 现代 浏览 器 以 及 HTMLS5 中 的 默认 脚本 语言 。 

可 以 在 HTML 文档 中 放 入 不 限 数量 的 脚本 。 脚 本 可 位 于 HTML 的 <body> 或 <head> 
部 分 中 ， 或 者 同时 存在 于 两 个 部 分 中 。 

通常 的 做 法 是 把 函数 放 入 <head> 部 分 中 ， 或 者 放 在 页 面 底部 。 这 样 就 可 以 把 它们 安 
置 到 同一 位 置 ， 而 不 干扰 页 面 的 内 容 。 


调 


(1) <head> 中 的 JavaScript 


把 一 个 JavaScript 函数 放置 到 HTML 页 面 


的 <head> 部 分 。 该 函数 会 在 点 击 按钮 时 被 


小 试 身手 : <head> 中 的 函数 添加 方法 


调 


<head> 部 分 添加 函数 的 示例 代码 如 下 : 


<!DOCTYPE html> 
<html> 

<head> 

<script> ; 
function myFunction() 1 
{ 


document.getElementByld("demo"). 


</head> 

<body> 

<h1> 我 的 Web 页 面 </h1> 

<p id="demo"> 一 个 段 浅 </p> 
<button type="button" 
onclick="myFunction()"> 尝试 一 下 </ 
button> 


innerHTML=" 我 的 第 一 个 JavaScript 函数 "; </body> 
} </html> 
</script> 
代码 的 运行 效果 如 图 12-1 所 示 。 
&jlole| ¥ | 
D 12-Lhtml 


湾 应 用 站 建议 网 站 


尝试 一 下 


Lael 


(2) <body> 中 的 JavaScript 


把 一 个 JavaScript 函数 放置 到 HTML 页 面 的 <body> 部 分 。 该 函 才 


CO file///C:/Users/Admi... 人 庚 


我 的 Web 页 面 


我 的 第 一 个 Javascript 函数 


小 试 身手 : <body> 中 的 函数 添加 方法 


<body> 部 分 添加 函数 的 示例 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<h1> 我 的 Web 页 面 </h1> 
<p id="demo"> 一 个 段落 </p> 


<button type="button" onclick=" 


myFunction()"> 尝试 一 下 </button> 
<script> 

function myFunction() 

{ 
document.getElementByld("demo"). 
innerHTML=" 我 的 第 一 个 JavaScript 函数 "; 
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} 
</script> 
</body> 
</html> 


代码 的 运行 效果 如 图 12-2 所 示 。 


口 12-2.html 


CG © filey//C/Users/Admi... 六 
让 应 用 口 建议 网 站 


我 的 Web 页 面 


一 个 段落 


| 类 试 一 下 


W232 


点 击 上 图 按钮 时 ， 会 出 现 和 图 12-1 一 样 的 效果 。 

(3) 外 部 的 JavaScript 

也 可 以 把 脚本 保存 到 外 部 文件 中 。 外 部 文件 通常 包含 被 多 个 网 页 使 用 的 代码 。 外 部 
JavaScript 的 文件 扩展 名 是 js。 如 需 使 用 外 部 文件 ， 请 在 <script> 标签 的 “src” 属性 中 设 
置 js 文件 。 

示例 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<script src="myScript.js"></script> 
</body> 

</html> 


: 可 以 将 脚本 放置 于 <head> 或 者 <body> 中 ， 实 际 运行 效果 与 在 <script> | 
标签 中 编写 脚本 完全 一 致 。 外 部 脚本 不 能 包含 <script> 标签 。 | 


| 12.2 ”JavaScript 的 基本 语法 | 


上 面 介绍 了 JavaScript 的 发 展 历史 、 基 本 特点 、 应 用 方向 和 用 法 ， 本 节 介 绍 JavaScript 
的 基本 语法 。 


国 12.2.1 数据 类 型 


JavaScript 中 有 5 种 简单 数据 类 型 (也 称 为 基本 数据 类 型 ) : Undefined、Null、 
Boolean、Number 和 String。 还 有 1 种 复杂 数据 类 型 一 -Object，Object 本 质 上 是 由 一 组 无 
序 的 名 值 对 组 成 的 。 

(1) Undefined 类 型 

Undefined 类 型 只 有 一 个 值 ， 即 特殊 的 undefined。 在 使 用 var 声明 变量 但 未 对 其 加 以 
初始 化 时 ， 这 个 变量 的 值 就 是 undefined， 例 如 : 


var Message; 


alert(message == undefined) //true 


(2) Null 类 型 

Null 类 型 是 第 二 个 只 有 一 个 值 的 数据 类 型 ， 这 个 特殊 的 值 是 null。 从 逻辑 角度 来 看 ， 
null 值 表示 一 个 空 对 象 指针 ， 而 这 也 正 是 使 用 typeof 操作 符 检 测 null 时 会 返回 “object” 
的 原因 ， 例 如 : 


var car = null; 
alert(typeof car); // "object" 


如 果 定 义 的 变量 准备 在 将 来 用 于 保存 对 象 ， 那 么 最 好 将 该 变量 初始 化 为 null， 而 不 是 
其 他 值 。 这 样 一 来 ， 只 要 直接 检测 null 值 就 可 以 知道 相应 的 变量 是 否 已 经 保存 了 一 个 对 象 
的 引用 ， 例 如 ， 


if(car != null) 

tt 

// 对 car 对 象 执行 某 些 操作 

} 

实际 上 ，undefined 值 是 派生 自 null 值 的 ， 因 此 ECMA-262 规定 对 它们 的 相等 性 测试 
返回 true。 


alert(undefined == null); //true 


尽管 null 和 undefined 有 这 样 的 关系 ， 但 它们 的 用 途 完全 不 同 。 无 论 在 什么 情况 下 都 
没有 必要 把 一 个 变量 的 值 显 式 地 设置 为 undefined， 可 是 同样 的 规则 对 null 却 不 适用 。 换 
名 话说， 只 保存 对 象 的 变量 还 没有 真正 保存 对 象 ， 就 应 该 明确 地 让 该 变量 保存 null 
值 。 这 样 做 不 仅 可 以 体现 null 作为 空 对 象 指针 的 惯例 ， 而 且 也 有 助 于 进一步 区 分 null 和 
Undefined 。 

(3) Boolean 类 型 

Boolean 类 型 只 有 两 个 字面 值 : true 和 false。 这 两 个 值 与 数字 值 不 是 一 忆 
true 不 一 定 等 于 1， 而 false 也 不 一 定 等 于 0。 

虽然 Boolean 类 型 的 字面 值 只 有 两 个 ， 但 JavaScript 中 所 有 类 型 的 值 都 有 与 这 两 个 
Boolean 值 等 价 的 值 。 要 将 一 个 值 转换 为 其 对 应 的 Boolean 值 ， 可 以 调用 类 型 转换 函数 
Boolean0， 例 如 : 


此 


jp 
圳 
四 


var message = 'Hello World '; 


var messageAsBoolean = Boolean(message); 
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在 这 个 例子 中 ， 字 符 串 message 被 转换 成 了 一 个 Boolean 值 ， 该 值 被 保存 在 
messageAsBoolean 变量 中 。 可 以 对 任何 数据 类 型 的 值 调用 Boolean0 函数 ， 而 且 总 会 返回 一 


个 Boolean 值 。 至 于 返回 的 这 个 值 是 tme 还 是 false， 取决 于 要 转换 值 的 数 


表 12-1 各 种 数据 类 型 及 其 对 象 的 转换 规则 


据 类 型 及 其 实际 值 。 


| 数据 类 型 转换 为 true 的 值 转换 为 false 的 值 


Boolean Trme False 


String 任何 非 空 字符 串 ( 空 字符 串 
| Object 任何 对 象 Null 


| Undefined ma (不 适用 ) Undefined 


(4) Number 类 型 


Number 类 型 用 来 表示 整数 和 浮 点 数值 ， 还 有 一 种 特殊 的 数值 ， 即 NaN〈 非 数值 Not 


a Number) 。 这 个 数值 用 于 表示 一 个 本 来 要 返回 数值 的 操作 数 未 返回 数值 的 情况 〈 这 样 就 
不 会 抛 出 错误 了 ) 。 例 如 ， 在 其 他 编程 语言 中 ， 任 何 数值 除 以 0 都 会 导致 错误 ， 从 而 停止 


代码 执行 。 但 在 JavaScript 中 ， 任 何 数值 除 以 0 都 会 返回 NaN， 因 此 不 会 影响 其 他 代码 的 


执行 。 


NaN 本 身 有 两 个 非 同 寻常 的 特点 。 首 先 ， 任 何 涉及 NaN 的 操作 例如 NaN/10) 都 会 


返回 NaN， 这 个 特点 在 多 步 计算 中 有 可 能 导致 问题 。 其 次 ，NaN 与 任何 值 都 不 相等 ， 包 


括 NaN 本 身 。 
下 面 的 代码 会 返回 false。 


alert(NaN == NaN); //false 


JavaScript 中 有 一 个 isNaN0 函数 , 这 个 函数 可 接收 一 个 参数 , 该 参数 可 以 是 任何 类 型 ， 
而 函数 会 帮助 确定 这 个 参数 是 否 “ 不 是 数值 ”。isNaN0 在 接收 一 个 值 后 ， 会 尝试 将 这 个 
值 转换 为 数值 。 某 些 不 是 数值 的 值 会 直接 转换 为 数值 ， 例 如 ， 字 符 串 “10” 或 Boolean 值 。 


而 任何 不 能 被 转换 为 数值 的 值 都 会 导致 这 个 函数 返回 tue。 例 如 : 


alert(isNaN(NaN)); ~ //true 

alert(isNaN(10)); /false(10 是 一 个 数值 ) 
alert(isNaN("10")); //false( 可 能 被 转换 为 数值 10) 
alert(isNaN("blue )) /true( 不 能 被 转换 为 数值 ) 
alert(isNaN(true)); //false( 可 能 被 转换 为 数值 1) 


有 3 个 函数 可 以 把 非 数 值 转换 为 数值 Number0、parseIntO0 和 parseFloat0。 第 一 个 函数 ， 


即 转型 函数 Number0 可 以 用 于 任何 数据 类 型 ， 而 另外 两 个 函数 则 专门 


成 数值 。 这 3 个 函数 对 于 同样 的 输入 会 返回 不 同 的 结果 。 
(5) String 类 型 


2 


可 以 由 单 引号 (”) 或 双 引 号 (”) 表示 。 


var strl = "Hello"; 


Var str2 = 'Hello' 


任何 字符 串 的 长 度 都 可 以 通过 访问 其 length 属性 取得 。 


alert(strl.length); 。 // 输 出 5 


田 


把 字符 串 转 换 


String 类 型 用 于 表示 由 零 或 多 个 16 位 Unicode 字符 组 成 的 字符 序列 ， 即 字符 串 。 


娄 
村 
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要 把 一 个 值 转换 为 一 个 字符 串 有 两 种 方式 。 第 一 种 是 使 用 每 个 值 都 有 的 toString0 方法 。 


varage =11; 

var ageAsString = age.toString(); // 字符 串 "11" 

var found = true; 

var foundAsString = found.toString(); // 字符 串 "true" 


数值 、 布 尔 值 、 对 象 和 字符 串 值 都 有 toString0 方法 。 但 null 和 undefined 值 没有 这 个 
方法 。 

多 数 情况 下 , 调用 toString0 方 法 不 必 传 递 参数 。 但是, 在 调用 数值 的 toString0O 方法 时 ， 
可 以 传递 一 个 参数 : 输出 数值 的 基数 。 


varnum = 10; 
alert(num.tostring());  /M/"10" 
alert(num.toString(2)); //"1010" 
alert(num.toString(8));  //"12" 
alert(num.tostring(10)); //"10" 
alert(num.toString(16)); //"a" 


通过 这 个 例子 可 以 看 出 ， 通 过 指定 基数 ，toString0 方法 会 改变 输出 的 值 。 而 数值 10 
根据 基数 的 不 同 ， 可 以 在 输出 时 被 转换 为 不 同 的 数值 格式 。 

(6) Object 类 型 

Object 类 型 的 对 象 其 实 就 是 一 组 数据 和 功能 的 集合 ， 其 可 以 通过 执行 new 操作 符 与 要 
创建 的 对 象 类 型 的 名 称 来 创建 。 而 创建 Object 类 型 的 实例 并 为 其 添加 属性 和 (或 ) 方法 ， 
就 可 以 创建 自 定义 对 象 。 


varo= new Object(); 


(1) 常量 

在 声明 和 初始 化 变量 时 ， 在 标识 符 的 前 面 加 上 关键 字 const， 就 可 以 把 其 指定 为 一 个 
常量 。 顾 名 思 义 ， 常 量 是 其 值 在 使 用 过 程 中 不 会 发 生变 化 ， 实 例 代码 如 下 : 

const NUM=100; 

NUM 标识 符 就 是 常量 ， 只 能 在 初始 化 时 被 赋值 。 

(2) 变量 

在 声明 变量 时 ， 在 标识 符 的 前 面 加 上 关键 字 var， 实 例 代码 如 下 : 

Var scoreForStudent = 0.0; 

该 语句 声明 scoreForStudent 变量 ， 并 且 初 始 化 为 0.0。 如 果 在 一 个 语句 中 声明 和 初始 
化 了 多 个 变量 ， 那 么 所 有 的 变量 都 具有 相同 的 数据 类 型 : 


var x= 10, y = 20; 
在 多 个 变量 的 声明 中 ， 也 能 指定 不 同 的 数据 类 型 : 


var x= 10, y = true; 


其 中 x 为 整 型 ，y 为 布尔 型 。 
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图 12.2.3 ”运算 符 和 表达 式 


不 同 的 运算 符 对 其 处 理 的 运算 数 类 型 有 要 求 ， 例 如 ， 不 能 将 两 个 由 非 数字 字符 组 成 的 
字符 串 进行 乘法 运算 。JavaScript 会 在 运算 过 程 中 按 需要 自动 转换 运算 数 的 类 型 ， 例 如 ， 
由 数字 组 成 的 字符 串 在 进行 乘法 运算 时 将 自动 转换 成 数字 。 

运算 数 的 类 型 不 一 定 与 表达 式 的 结果 相同 ， 例 如 ， 表 达 式 中 的 运算 数 往往 不 是 布尔 型 
数据 ， 而 返回 结果 总 是 布尔 型 数据 。 

根据 运算 数 的 个 数 , 可 以 将 运算 符 分 为 三 种 类 型 一 元 运算 符 、 二 元 运算 符 和 三 元 运算 符 。 

@ 一 元 运算 符 是 指 只 需要 一 个 运算 数 参 与 运算 的 运算 符 ， 一 元 运算 符 的 典 
型 应 用 是 取 反 运算 。 

e@ 二 元 运算 符 即 指 需要 两 个 运算 数 参与 运算 ，JavaScript 中 的 大 部 分 运算 符 
都 是 二 元 运算 符 ， 比 如 ， 加 法 运算 符 、 比 较 运算 符 等 。 

@ 三 元 运算 符 是 运算 符 中 比较 特殊 的 一 种 ， 它 可 以 将 三 个 表达 式 合并 为 一 
个 复杂 的 表达 式 。 

(1) 赋值 运算 符 (=) 

作用 : 给 变量 赋值 。 

语法 描述 : 


result = expression 


语法 解释 : = 运算 符 和 其 他 运算 符 一 样 ， 除 了 把 值 赋 给 变量 外 ， 使 用 它 的 表达 式 还 有 
一 个 值 。 这 就 意味 着 可 以 像 下 面 这 样 把 赋值 操作 连 起 来 写 : 


j=k=1=0; 


执行 该 语句 后 ，j、k 和 1 的 值 都 等 于 零 。 

因为 (=) 被 定义 为 一 个 运算 符 ， 所 以 可 以 将 它 运用 于 更 复杂 的 表达 式 。 如 : 
(a=b) 一 0 // 先 给 a 赋值 b, 再 检测 a 的 值 是 否 为 0。 
赋值 运算 符 的 结合 性 是 从 右 到 左 的 ， 因 此 可 以 这 样 用 : 
a=b=c=d=100 /给 多 个 变量 赋 同 一 个 值 。 

(2) 加 法 赋值 运算 符 (+=) 
作用 : 将 变量 值 与 表达 式 值 相 加 ， 并 将 结果 赋 给 该 变量 。 
语法 描述 : 


result += expression 

(3) 加 法 运算 符 (+) 

作用 : 将 数字 表达 式 的 值 加 到 另 一 数字 表达 式 上 ， 或 连接 两 个 字符 串 。 
语法 描述 : 


result = expression1 + expression2 
语法 解释 : 如 果 “+” (加 号 ) 运算 符 表达 式 中 一 个 是 字符 串 ， 而 另 一 个 不 是 ， 则 另 
个 会 被 自动 转换 为 字符 串 。 
如 果 加 号 运算 符 中 一 个 运算 数 为 对 象 ， 则 这 个 对 象 会 被 转化 为 可 以 进行 加 法 运算 的 数 
字 或 可 以 进行 连接 运算 的 字符 串 ， 这 一 转化 是 通过 调用 对 象 的 valueofO) 或 tostring0 方法 
来 实现 的 。 
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加 号 运算 符 有 将 参数 转化 为 数字 的 功能 ， 如 果 不 能 转化 为 数字 则 返 
如 vara=”100”; varb=+a 此 时 的 值 为 数字 100。 
+ 运算 符 用 于 数字 或 字符 串 时 ， 并 不 一 定 就 都 会 转化 成 字符 串 进 行 连接 ， 如 : 
var a=1+2+"hello” // 结果 为 3hello 
var b="hello"+1+2 // 结果 为 hello12 


5 


NaN. 


产生 这 种 情况 的 原因 是 + 运算 符 是 从 左 到 右 进 行 运算 的 。 
(4) 减法 赋值 运算 符 (一 ) 

作用 : 从 变量 值 中 减 去 表达 式 值 ， 并 将 结果 赋 给 该 变量 。 
语法 描述 : 


result -= expression 
使 用 -= 运算 符 与 使 用 下 面 的 语句 是 等 效 的 : 


result = result 一 expression 
(5) 减法 运算 符 (-) 


作用 : 从 一 个 表达 式 的 值 中 减 去 另 一 个 表达 式 的 值 ， 只 有 一 个 表达 式 时 取 其 相反 数 。 
语法 1 


result = numberl - number2 
语法 2 


-number 


语法 解释 : 在 语法 1 中 ，- 运算 符 是 算术 减法 运算 符 ， 用 来 获得 两 个 数值 之 间 的 差 。 


在 语法 2 中 ，- 运算 符 被 用 作 一 元 取 负 运算 符 ， 用 来 指出 一 个 表达 式 的 负 值 。 


对 于 语法 2， 和 所 有 一 元 运算 符 一 样 ， 表 达 式 按照 下 面 的 规则 来 求 值 : 

@ 如 果 应 用 于 undefined 或 null 表达 式 ， 则 会 产生 一 个 运行 时 错误 。 

@ ”对象 被 转换 为 字符 串 。 

@ 如 果 可 能 ， 则 字符 串 被 转换 为 数值 。 如 果 不 能 ， 则 会 产生 一 个 运行 时 的 
着 误 。 

@ Boolean 值 被 当 作 数值 (如果 是 false， 则 为 0， 如 果 是 tme， 则 为 1)。 

该 运算 符 被 用 来 产生 数值 。 在 语法 2 中 ， 如 果 生 成 的 数值 不 是 零 ， 则 result 与 生成 的 


数值 颠倒 符号 后 是 相等 的 。 如 果 生 成 的 数值 是 零 ， 则 result 是 零 。 


如 果 “-” 减 法 运算 符 的 运算 数 不 是 数字 ， 那 么 系统 会 自动 把 它们 转化 为 数字 。 
也 就 是 说 ， 加 号 运算 数 会 被 优先 转化 为 字符 串 ， 而 减 号 运算 数 会 被 优先 转化 为 数字 。 


以 此 类 推 ， 只 能 进行 数字 运算 的 运算 符 的 运算 数 都 将 被 转化 为 数字 比较 运算 符 也 会 优先 
转化 为 数字 进行 比较 ) 。 


(6) 递增 (++) 和 递减 (--) 运算 符 
作用 : 变量 值 递增 一 或 递减 


语法 1 


result = ++variable 
result = --variable 

result = variable++ 
result = variable 一 
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语法 2 
++variable 
--variable 
variable++ 
variable 一 


语法 解释 : 递增 和 递减 运算 符 是 修改 变量 中 的 值 的 快捷 方式 。 包 含 其 中 一 个 这 种 运算 
符 的 表达 式 的 值 ， 依 赖 于 该 运算 符 是 在 变量 前 面 还 是 在 变量 后 面 。 

递增 运算 符 (++) ， 只 能 运用 于 变量 ， 如 果 用 在 变量 前 则 为 前 递增 运算 符 ， 如 果 用 
于 变量 后 则 为 后 递增 运算 符 。 前 递增 运算 符 会 用 递增 后 的 值 进行 计算 ， 而 后 递增 运算 符 用 
递增 前 的 值 进 行 运算 。 

递减 运算 符 的 用 法 与 递增 运算 符 的 用 法 相同 。 

(7) 乘法 赋值 运算 符 (*=) 

作用 : 变量 值 乘 以 表达 式 值 ， 并 将 结果 赋 给 该 变量 。 


语法 描述 ; 


result *= expression 
使 用 *= 运算 符 和 使 用 下 面 的 语句 是 等 效 的 : 
result = result * expression 
(8) 乘法 运算 符 (*) 
作用 : 两 个 表达 式 的 值 相 乘 。 
语法 描述 : 
result = numberl*number2 
(9) 除法 赋值 运算 符 (=) 
作用 : 变量 值 除 以 表达 式 值 ， 并 将 结果 赋 给 该 变量 。 
语法 描述 : 
result /= expression 
使 用 全 运算 符 和 使 用 下 面 的 语句 是 等 效 的 : 
result = result / expression 
(10) 除法 运算 符 (/) 
作用 : 将 两 个 表达 式 的 值 相 除 。 
语法 描述 : 


result = numberl / number2 


(11) 逗号 运算 符 (,) 

作用 : 顺序 执行 两 个 表达 式 。 
语法 描述 : 

expression1, expression2 


语法 解释 : , 运算 符 使 它 两 边 的 表达 式 以 从 左 到 右 的 顺序 被 执行 ， 并 获得 右边 表达 式 
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的 值 。 运 算 符 最 普通 的 用 途 是 在 for 循环 的 递增 表达 式 中 使 用 。 例 如 : 


for (i= 0;i< 10; i++,j++) 
{ 
k=i+tj; 

} 

每 次 通过 循环 的 末端 时 ， for 语句 只 允许 单个 表达 式 被 执行 。 运 算 符 被 用 来 允许 多 个 
表达 式 被 当 作 单个 表达 式 ， 从 而 规避 该 限制 。 

〈12) 取 余 赋值 运算 符 (%=) 

作用 : 变量 值 除 以 表达 式 值 ， 并 将 余数 赋 给 变量 。 


语法 描述 : 


result %= expression 


使 用 %= 运算 符 与 使 用 下 面 的 语句 是 等 效 的 : 


result = result % expression 


(13) 取 余 运算 符 (%) 
一 个 表达 式 的 值 除 以 另 一 个 表达 式 的 值 ， 返 回 余 数 。 
语法 描述 ， 


Result = numberl % number2 


语法 解释 : 取 余 〈 或 余数 ) 运算 符 用 numberl 除 以 number2 (把 浮 点 数 四 舍 五 入 为 
整数 ) ， 然 后 只 返回 余数 作为 result。 例 如 ， 在 下 面 的 表达 式 中 ，A 〈 即 result) 等 于 5。 


A=19%6.7 


(14) 比较 运算 符 
作用 : 返回 表示 比较 结果 的 Boolean 值 。 
语法 描述 : 


expression1 comparisonoperator expression2 


说 明 : 比较 字符 串 时 ，JScript 使 用 字符 串 表 达 式 的 Unicode 字符 值 。 
(15) 关系 运算 符 (<、>、<=、>=) 

关于 关系 运算 符 的 解释 如 下 : 

@ 试图 将 expressionl 和 expression2 都 转换 为 数字 。 

e@ 如 果 两 表达 式 均 为 字符 串 ， 则 按 字典 序 进 行 字符 串 比 较 。 
e@ 如 果 其 中 一 个 表达 式 为 NaN， 返 回 false。 
. 
. 


负 零 等 于 正 零 。 
负 无 穷 小 于 包括 其 本 身 在 内 的 任何 数 。 

@ 正 无 穷 大 于 包括 其 本 身 在 内 的 任何 数 。 

比较 运算 符 如 大 于 、 小 于 等 只 能 对 数字 或 字符 串 进行 比较 , 不 是 数字 或 字符 串 类 型 的 ， 
将 被 转化 为 数字 或 字符 串 类 型 。 如 果 同时 存在 字符 串 和 数字 ， 则 字符 串 优 先 转化 为 数字 ， 
如 不 能 转化 为 数字 ， 则 转化 为 NaN， 此 时 表达 式 的 最 后 结果 为 flse。 如 果 对 象 可 以 转化 
为 数字 或 字符 串 ， 则 它 会 被 优先 转化 为 数字 。 如 果 运 算数 都 不 能 被 转化 为 数字 或 字符 串 ， 
则 结果 为 false。 如 果 运 算数 中 有 一 个 为 NaN, 或 被 转化 为 了 NaN， 则 表达 式 的 结果 总 是 为 
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false。 当 比较 两 个 字符 串 时 ， 是 将 逐个 字符 进行 比较 ， 按 照 的 是 字符 在 Unicode 编码 集中 
的 数字 ， 因 此 字母 的 大 小 写 也 会 对 比较 结果 产生 影响 。 

(16) 相等 运算 符 (==、!=) 

作用 : 如 果 两 表达 式 的 类 型 不 同 ， 则 试图 将 它们 转换 为 字符 串 、 数 字 或 Boolean 量 。 

NaN 与 包括 其 本 身 在 内 的 任何 值 都 不 相等 ， 负 零 等 于 正 零 。 

ul 与 null 和 undefined 相等 。 

说 明 : 相同 的 字符 串 、 数 值 上 相等 的 数字 、 相 同 的 对 象 、 相 同 的 Boolean 值 或 者 ( 当 
类 型 不 同时 ) 能 被 强制 转化 为 上 述 情况 之 一 的 ， 均 被 认为 是 相等 的 。 

其 他 比较 均 被 认为 是 不 相等 的 。 

关于 〈 一 ) ， 要 想 使 等 式 成 立 ， 需 满足 的 条 件 是 : 

等 式 两 边 类 型 不 同 ， 但 经 过 自动 转化 类 型 后 的 值 相同 ， 转 化 时 如 果 有 一 边 为 数字 ， 则 
另 一 边 的 非 数 字 类 型 会 优先 转化 为 数字 类 型 ， 布 尔 值 始 终 是 转化 为 数字 进行 比较 的 ， 不 管 
等 式 两 边 中 有 没有 数字 类 型 ，tmue 转化 为 1，false 转化 为 0。 对 象 也 会 被 转化 。 


null==undefined 

(17) 恒 等 运算 符 (===、!==) 

作用 : 除了 不 进行 类 型 转换 ， 并 且 类 型 必须 相同 以 外 ， 这 些 运 算 符 与 相等 运算 符 的 作 
用 是 一 样 的 。 

说 明 ; 关于 (二 =) ， 要 想 使 等 式 成 立 ， 需 满足 的 条 件 是 : 

等 式 两 边 值 相 同 ， 类 型 也 相同 。 

如 果 等 式 两 边 是 引用 类 型 的 变量 ， 如 数组 、 对 象 、 函 数 ， 则 要 保证 两 边 引 用 的 是 同 
个 对 象 ， 否 则 即使 是 两 个 单独 的 完全 相同 的 对 象 也 不 会 完全 相等 。 

等 式 两 边 的 值 都 是 null 或 undefined, 但 如 果 是 NaN 就 不 会 相等 。 

(18) 条 件 (三 目 ) 运算 符 (?:) 

作用 : 根据 条 件 执行 两 个 语句 中 的 其 中 一 个 。 

语法 描述 : 

test ? 语句 1 : 语句 2 

语法 解释 : 当 test 是 true 或 者 false 时 执行 的 语句 。 可 以 是 复合 语句 。 

(19) delete 运算 符 

作用 : 从 对 象 中 删除 一 个 属性 ， 或 从 数组 中 删除 一 个 元 素 。 


语法 描述 ， 


delete expression 

语法 解释 : expression 参数 是 一 个 有 效 的 JScript 表达 式 ， 通 常 是 一 个 属性 名 或 数组 元 素 。 

如 果 expression 的 结果 是 一 个 对 象 ， 且 在 expression 中 指定 的 属性 存在 ， 而 该 对 象 又 
不 允许 它 被 删除 ， 则 返回 false。 在 所 有 其 他 情况 下 ， 返 回 tue。 

delete 是 一 个 一 元 运算 符 ， 用 来 删除 运算 数 指定 的 对 象 属性 、 数 组 元 素 或 变量 ， 如 果 
删除 成 功 返 回 tue， 删 除 失 败 则 返回 false。 并 不 是 所 有 的 属性 和 变量 都 可 以 删除 ， 比 如 
var 声明 的 变量 就 不 能 删除 ， 内 部 的 核心 属性 和 客户 端的 属性 也 不 能 删除 。 要 注意 的 是 ， 
用 delete 删除 一 个 不 存在 的 属性 时 (或 者 说 它 的 运算 数 不 是 属性 、 数 组 元 素 或 变量 时 )， 
将 返回 true。 


delete 影响 的 只 是 属性 或 变量 名 ， 并 不 会 删除 属性 或 变量 引用 的 对 象 (如 果 该 属性 或 
变量 是 一 个 引用 类 型 时 ) 。 

(20) in 运算 符 

作用 : 测试 对 象 中 是 否 存 在 该 属性 。 

语法 描述 


prop in objectName 

语法 解释 :in 操作 检查 对 象 中 是 否 有 名 为 property 的 属性 。 也 可 以 检查 对 象 的 原型 ， 
以 便 知道 该 属性 是 否 为 原型 链 的 一 部 分 。 

加 运算 符 要 求 其 左边 的 运算 数 是 一 个 字符 串 或 者 可 以 被 转化 为 字符 串 ; 右边 的 运算 数 
是 一 个 对 象 或 数组 ， 如 果 左 边 的 值 是 右边 对 象 的 一 个 属性 名 ， 则 返回 true。 

(21) new 运算 符 

作用 : 创建 一 个 新 对 象 。 

语法 描述 


new constructor[(arguments)] 


new 运算 符 执行 下 面 的 任务 : 
® 一 个 没有 成 员 的 对 象 。 
. 对 象 调用 构造 函数 ， 传递 一 个 指针 给 新 创建 的 对 象 作为 this 指针 。 
@ 构造 函数 根据 传递 给 它 的 参数 初始 化 该 对 象 。 

(22) typeof 运算 符 

作用 : 返回 一 个 用 来 表示 表达 式 的 数据 类 型 的 字符 串 。 
语法 描述 : 


typeof[()expression[]] ; 

说 明 : expression 参数 是 需要 查找 类 型 信息 的 任意 表达 式 。 

typeof 运算 符 把 类 型 信息 当 作 字符 串 返 回 。typeof 返回 值 有 6 种 可 能 : “number” 
“string” “boolean” “object” “function” 和 “undefined”。 

typeof 语法 中 的 圆 括号 是 可 选项 。 

typeof 也 是 一 个 运算 符 ， 用 于 返回 运算 数 的 类 型 ，typeof 也 可 以 用 括号 把 运算 数 括 起 来 。 
fypeof 对 对 象 和 数组 返回 的 都 是 object 因此 它 只 在 用 来 区 分 对 象 和 原始 数据 类 型 时 才 有 用 。 
(23) instanceof 运算 符 
作用 : 返回 一 个 Boolean 值 ， 指 出 对 象 是 否 是 特定 类 的 一 个 实例 。 
语法 描述 : 


result = object instanceof class 


语法 解释 : 如 果 object 是 class 的 一 个 实例 ， 则 instanceof 运算 符 返 回 tue。 如 果 
object 不 是 指定 类 的 一 个 实例 ， 或 者 object 是 null， 则 返回 false。 

instanceof 运算 符 要 求 其 左边 的 运算 数 是 一 个 对 象 ， 右 边 的 运算 数 是 对 象 类 的 名 字 ， 如 
果 运 算 符 左边 的 对 象 是 右边 类 的 一 个 实例 ， 则 返回 tue。 在 js 中 ， 对 象 类 是 由 构造 函数 定义 
的 ， 所 以 右边 的 运算 数 应 该 是 一 个 构造 函数 的 名 字 。 注 意 ，js 中 所 有 对 象 都 是 Object 类 的 
实例 。 
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(24) void 运算 符 

作用 : 避免 表达 式 返 回 值 。 
语法 描述 : 

void expression 


expression 参数 是 任意 有 效 的 JScript 表达 式 。 

表达 式 是 关键 字 、 运 算 符 、 变 量 以 及 文字 的 组 合 ， 用 来 生成 字符 串 、 数 字 或 对 象 。 一 
个 表达 式 可 以 完成 计算 、 处 理 字符 、 调 用 函数 、 验 证 数据 等 操作 。 表 达 式 的 值 是 表达 式 运 
算 的 结果 ， 常 量 表达 式 的 值 就 是 常量 本 身 ， 变 量 表 达 式 的 值 则 是 变量 引用 的 值 。 

在 实际 编程 中 ， 可 以 使 用 运算 数 和 运算 符 建 立 复 杂 的 表达 式 ， 运 算数 是 一 个 表达 式 内 
的 变量 和 常量 ， 运 算 符 是 表达 式 中 用 来 处 理 运 算数 的 各 种 符号 。 如 果 表 达 式 中 存在 多 个 运 
算 符 ， 那 么 它们 总 是 按照 一 定 的 顺序 被 执行 ， 表 达 式 中 运算 符 的 执行 顺序 被 称 为 运算 符 的 
优先 级 。 使 用 运算 符 0 可 以 改变 默认 的 运算 顺序 ， 因 为 括号 运算 符 的 优先 级 高 于 其 他 运 
算 符 的 优先 级 。 赋 值 操作 的 优先 级 非常 低 ， 几 乎 总 是 最 后 才 被 执行 。 


转 12.2.4 基本 语句 


在 JavaScript 中 主要 有 两 种 基本 语 包 一 种 是 循环 语句 , 如 for、while ; 一 种 是 条 件 语句 ， 
如 站 等 。 另 外 ， 还 有 一 些 其 他 的 程序 控制 语句 ， 下 面 详 细 介 绍 这 些 基 本 语句 的 使 用 方法 。 

(1) if 语 句 

条 件 语句 用 于 基于 不 同 的 条 件 来 执行 不 同 的 动作 ， 在 写 代 码 时 ， 总 是 需要 为 不 同 的 决 
定 来 执行 不 同 的 动作 。 可 以 在 代码 中 使 用 条 件 语句 来 完成 该 任务 。 

在 JavaScript 中 ， 可 使 用 以 下 条 件 语句 : 

@ 让 语句 : 只 有 当 指定 条 件 为 true 时 ， 使 用 该 语句 来 执行 代码 。 

@ 让 .else 语句 : 当 条 件 为 tue 时 执行 代码 ， 当 条 件 为 false 时 执行 其 他 代码 。 

@ JavaScript 三 目 运算 : 当 条 件 为 true 时 执行 代码 ， 当 条 件 为 false 时 执行 

其 他 代码 。 

@ 让..else 让 .else 语句 ， 使 用 该 语句 来 选择 多 个 代码 块 之 一 来 执行 。 

@ switch 语句 : 使 用 该 语句 来 选择 多 个 代码 块 之 一 来 执行 。 

只 有 当 指 定 条 件 为 tue 时 ， 该 语句 才 会 执行 代码 。 

语法 描述 : 


if (condition) 


{ 
当 条 件 为 true 时 执行 的 代码 
} 


需要 注意 的 是 请 使 用 小 写 的 耻 。 使 用 大 写字 母 〈 正 ) 会 生成 JavaScript 错误 。 


小 试 身手 : 点 击 按钮 会 出 现 问候 语 


示例 代码 如 下 : 


<!DOCTYPE html> 


<html> 


<head> 

<meta charset="utf-8"> 

<title>if 语句 </title> 

</head> 

<body> 

<p> 如 果 时 间 早 于 18:00， 会 获得 问候 
"Good day"。</p> 


Var X= 


var time=new Date().getHours(); 


if (time<18}{ 
x="Good day"; 


1: 


document.getElementByld("demo"). 


innerHTML=x; 


<button onclick="myFunction()"> 点 击 这 里 | 
</button> | </script> 
<pid="demo"></p> | </body> 
<script> | </html> 
function myFunction(){ 
代码 的 运行 效果 如 图 12-3 所 示 。 
ENEICIEEE 
D i 可 x 


CG |© filey///C:/Users/Administrator/Desktop/h5+c3#j... 伍 
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如 果 时 间 早 于 18:00， 会 获得 问候 "Good day"。 


点 击 这 里 ] 


Good day 


图 12-3 


在 这 个 语法 中 ， 没 有 ..else..。 已 经 提示 浏览 器 只 有 在 指定 条 件 为 true 时 


(2) if...else 语句 


使 用 让 .…else 语句 在 条 件 为 tue 时 执行 代码 ， 在 条 件 为 false 时 执行 其 他 代码 。 


语法 描述 : 


if (condition) 
{ 
当 条 件 为 true 时 执行 的 代码 
} 
else 
{ 
当 条 件 不 为 true 时 执行 的 代码 


小 试 身手 : 用 时 间 点 来 设置 问候 语 


示例 代码 如 下 : 


<!DOCTYPE html> 
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<html> ! var time=new Date().getHours(); 
<head> ! if (time<20) 

<meta charset="utf-8"> | { 

<title> 放 .else 语句 </title> | x="Good day"; 

</head> : } 

<body> | else 

<p> 点 击 这 个 按钮 , 获得 基于 时 间 的 问候 。 | { 

</p> ! Xx="Good evening"; 

<button onclick="myFunction()"> 点 击 这 里 ! } 

</button> : document.getElementByld("demo"). 
<pid="demo"></p> ! innerHTML=x; 

<script> | } 

function myFunction() | </script> 

{ | toy 

Var x="™"; | </html> 


代码 的 运行 效果 如 图 12-4 所 示 。 


/一 一 一 一 一 一 一 —\ 
y 中 .else 语句 x 
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点 击 这 个 按钮 ， 获得 基于 时 间 的 问候 。 


Good day 


图 12-4 


(3) for 语句 

for 语句 的 作用 是 循环 可 以 将 代码 块 执行 指定 的 次 数 。 若 想 多 次 运行 相同 的 代码 ， 并 
且 每 次 的 值 都 不 同 ， 那 么 使 用 循环 是 很 方便 的 。 

一 般 写法 : 

document.write(cars[0] + “<br>” ); 

document.write(cars[1] + “<br>” ); 

document.write(cars[2] + “<br>” ); 

document.write(cars[3] + “<br>” ); 

document.write(cars[4] + “<br>” ); 

document.write(cars[5] + “<br>” ); 

使 用 for 循环 : 

for (var i=0;i<cars.length;i++) 

{ 

document.write(cars[i] + "<br>"); 

} 

下 面 是 for 循环 的 语法 描述 : 


for ( 语句 1; 语句 2; 语句 3) 


被 执行 的 代码 块 
} 


语法 解释 : 语句 1: 


的 条 件 ; 语句 3: 在 循环 (代码 块 ) 已 被 执行 之 

通常 会 使 用 语句 1 初始 化 循环 中 所 用 的 变量 
使 用 语句 1 也 可 以 ， 可 以 在 语句 1 中 初始 化 任意 
于 评估 初始 变量 的 条 件 ， 语 


语句 2 


句 2 同 


(代码 块 ) 开始 前 执行 starts; 语句 2， 定义 运行 循环 (代码 块 》 
后 执行 。 


(Var i=0)， 语 句 1 是 可 选 的 ， 也 就 是 说 不 
(或 者 多 个 ) 值 。 


样 是 可 选 的 ， 如 果 语句 2 返回 tue， 则 循 


环 再 次 开始 ， 如 果 返 回 false， 则 循环 结束 。 如 果 省 略 了 语句 2， 那 么 必须 在 循环 内 提供 


break， 否 则 循环 无 法 停 下 。 这 样 有 可 能 


循环 语句 方法 的 示例 代码 如 下 : 


<!IDOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>for 语句 </title> 

</head> 

<body> 

<p> 点 击 按钮 循环 代码 5 次 。</p> 


<button onclick="myFunction()"> 点 击 这 里 ， | 


</button> 

<p id="demo"></p> 

<script> 

function myFunction(){ 

Var x=""; 

for (var i=0;i<5;i++){ 

x=x +" 该 数字 为 "+i+ "<br>"; 
} 


document.getElementByld("demo"). 


从 上 面 的 例子 中 可 以 看 出 : 
e 在 循环 


浏览 器 骨 溃 。 
语句 3 会 增加 初始 变量 的 值 ， 语 句 3 也 是 可 选 的 ， 语 句 3 有 多 种 用 法 ， 增 量 可 以 是 负 
数 (i--)， 或 者 更 大 (i=i+15)， 语句 3 也 可 以 省 略 〈 比 如 当 循环 内 部 有 相应 的 代码 时 ) 。 


小 试 身手 : 设置 循环 语句 的 方法 


innerHTML=x; 
} 

</script> 
</body> 
</html> 


代码 的 运行 效果 如 图 12-5 所 示 。 


始 之 前 设置 变量 (var 1=0)。 


SI[SIET 区 
口 for 语 句 x 全 
CO file///C/Users/Admi... 六 
| 洪 帮 六 建议 网 站 
| | 
点 击 按钮 循环 代码 5 次 。 
点 击 这 里 
该 数字 为 0 
该 数字 为 1 
该 数字 为 2 
该 数字 为 3 
该 数字 为 4 
12-5 


e 定义 循环 运行 的 条 件 (i 必须 小 于 5) 。 
@ 在 每 次 代码 块 已 被 执行 后 增加 一 个 值 (i++)。 


(4) while 语句 


JavaScript 中 的 while 循环 的 目的 是 为 了 反复 执行 语句 或 代码 块 。 只 要 指定 条 件 为 


true， 循 环 就 可 以 一 直 执 行 代码 块 。 
语法 描述 : 
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while ( 条 件 ) 
{ 
需要 执行 的 代码 
} 


小 试 身手 : while 循环 的 用 法 
示例 代码 如 下 : 


<!IDOCTYPE html> | 
<html> 

<head> 

<meta charset="utf-8"> 

<title> while 语句 </title> 

</head> 

<body> 

<p> 点 击 下 面 的 按钮 ， 只 要 i 小 于 5 就 一 
直 循环 代码 块 。</p> 

<button onclick="myFunction()"> 点 击 这 里 
</button> 

<pid="demo"></p> 

<script> 


代码 的 运行 效果 如 图 12-6 所 示 。 


六 while 语 句 


function myFunction(}{ 

Var x="",i=0; 

while (i<5){ 

x=X+" 该 数字 为 +i+"<br>"; 
itt; 

} 
document.getElementByld("demo"). 
innerHTML=x; 

bs 

</script> 

</body> 

</html> 
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点 击 下 面 的 按钮 ， 只 要 i 小 于 5 就 一 直 循环 代 
码 块 


12-6 


本 例 中 的 循环 将 继续 运行 ， 只 要 变量 i 小 于 5。 


Ei JavaScript 事件 分 析 


HTML 事件 可 以 是 浏览 器 行为 ， 也 可 以 是 月 


户 


行为 。HTML 网 页 中 的 每 个 元 素 都 可 


以 产生 某 些 可 以 触发 JavaScript 函数 的 事件 。 在 事件 触发 时 ，JavaScript 可 以 执行 一 


HIML 元 素 中 可 以 添加 事件 属性 ， 使 用 


JavaSeript 代码 可 以 添加 HTML 元 素 。 


些 代码 。 


园 12.3.1 事件 类 型 

与 浏览 器 进行 交互 时 ， 浏 览 器 就 会 触发 各 种 事件 。 比 如 ， 当 打开 某 一 网 页 时 ， 浏 览 器 
加 载 完成 了 这 个 网 页 ， 就 会 触发 一 个 load 事件 ， 当 点 击 页 面 中 的 某 一 个 “地 方 ”， 浏 览 
器 就 会 在 那个 “地 方 ” 触 发 一 个 click 事件 。 就 可 以 编写 JavaScript， 通 过 监听 某 一 个 事件 ， 


来 实现 某 些 功 能 扩展 
网 页 之 后 ， 就 会 显示 欢迎 信息 。 


(1) 监听 事件 


。 例 如 ，! 


浏览 器 会 根据 某 些 操作 触发 对 应 事件 ， 如 果 需 要 对 某 种 导 


监听 load 事件 ， 显 示 欢 迎 


个 事件 。 监 听 事 件 的 方法 主要 有 以 下 几 种 。 


第 一 种 : HTML 内 联 属 性 (避免 使 用 ) 


件 时 ， 执 行 属性 值 的 内 容 。 
例如 ， 


<button onclick="alert(' 点 击 了 这 个 按钮 );"> 点 击 这 个 按钮 </button> 


onclick 属性 表示 触发 click， 属 性 值 的 内 容 〈JavaScript 代码 ) 会 在 单 


点 时 执行 

显而易见 ， 使 

和 开发 。 所 以 除非 必须 使 
第 二 种 : DOM 属性 绑 定 


否则 尽量 避免 使 


也 可 以 直接 设置 DOM 属性 来 指定 某 个 要 


element.onclick = fonction(event){ 


alert(' 你 点 击 了 这 个 按钮 ); 
b 


上 面 代码 就 是 监听 element 节点 的 click 导 


HTML 元 素 里 面 直接 填写 事件 有 关 属 性 ， 属 性 值 为 JavaScript 代码 ， 即 可 在 触发 该 于 


信息 ， 那 么 当 浏览 器 加 载 完 一 


有 件 进行 处 理 ， 则 需要 监听 这 


瑞 


6 该 HTML 节 


这 种 方法 ，JavaScript 代码 与 HTML 代码 耦合 在 了 一 起 ， 不 便于 维护 


〈 例 如 统计 链接 点 击 数据 ) ， 这 种 方法 。 


有 件 对 应 的 处 理 函数 ， 这 个 方法 比较 简单 : 


有 件 。 它 比较 简单 易 懂 , 而 且 有 较 好 的 兼容 性 。 


但 是 也 有 缺陷 ， 因 为 直接 赋值 给 对 应 属性 ， 所 以 如 果 在 后 面 代码 中 再 次 为 element 绑 定 一 


个 回调 函数 ， 会 覆盖 掉 之 前 回调 函数 的 内 容 。 
虽然 也 可 以 用 一 些 方法 实现 多 个 绑 定 ， 但 还 是 推荐 下 面 的 标准 事件 监听 函数 。 


第 三 种 : 使 用 事件 监听 函数 
标准 的 事件 监听 函数 如 下 : 


element.addEventListener(<event-name>, <callback>, <use-capture>); 


表示 在 element 这 个 对 象 上 面 添 加 一 个 事件 监 


监听 器 ， 当 监 


ns 


E 时 , 调用 <callback> 这 个 回调 函数 ,至 


当 六 


冒 泡 ， 会 在 后 面 讲解 。 


于 <use-capture> 这 个 参数 , 表示 该 事件 


段 中 监听 (设置 为 tue) ， 还 是 在 “ 冒 泡 ” 阶 段 中 监听 〈 设 置 为 flse) 。 


监听 到 有 <event-name> 导 


监听 是 


关于 


件 发 
在 “ 捕 
捕获 
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<meta charset="UTF-8"> 


用 标准 事件 监听 函数 改写 上 面 的 例子 : 


<body> 
var btn = document.getElements <button id="btn"> 点 击 这 里 </button> 
ByTagName('button’'); ody 
btn[0].addEventListener('click, function() { pei 


， 文 个 : 路 
alert( 你 点 击 了 这 个 按钮 ) <script type="text/javascript"> 


1 
! 
1 
| 
| 
1 
1 
| var btn = document.getElement 
! 
1 
! 
! 
! 
! 


上 false); 
这 里 最 好 是 为 HTML 结构 定义 个 这 或 Byld('btn'); 
者 class 属性 ， 为 方便 选择 ， 在 这 里 只 作为 ， btn.addEventListener('click'’, function(){ 
演示 使 用 。 alert( 你 点 击 了 这 里 小 
三 }, false); 
制作 阻止 页 面 ， 示 例 代 码 如 下 : 
<html> 


代码 的 运行 效果 如 图 12-7 所 示 。 


yO 12-3html x\W 


GC © fileV//CYVUseryAdministratorDesktop/h5+c3+j.， 公 
二 启 此 网 页 显示 : 
点 击 | 你 上 二 了 这 到 


图 12-7 


(2) 移 除 事 件 监听 

当 为 某 个 元 素 绑 定 了 一 个 事件 , 每 次 触发 这 一 事件 时 ,都 会 执行 事件 绑 定 的 回调 函数 。 
如 果 想 解除 绑 定 ， 需 要 使 用 removeEventListener 方法 : 

element.removeEventListener(<event-name>, <callback>, <use-capture>); 

需要 注意 的 是 ， 绑 定 事 件 时 的 回调 函数 不 能 是 匿名 函数 ， 必 须 是 一 个 声明 的 函数 ， 
为 解除 事件 绑 定 时 需要 传递 这 个 回调 函数 的 引用 ， 才 可 以 断 开 绑 定 。 


小 试 身手 : 移 除 监听 事件 的 用 法 


var btn = document.getElementByld 
("btn'); 


示例 代码 如 下 : 

<html> ! var fun = function(){ 

<body> | alert( 这 个 按钮 只 支持 一 次 点 击 ); 
<button id="btn"> 点 击 这 里 </button> | btn.removeEventListener('click', fun, false); 
</body> "> 

</html> | btn.addEventListener('click', fun, false); 
<script type="text/javascript"> | </script> 


代码 的 运行 效果 如 图 12-4 所 示 。 
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要 此 网 页 显示 : 
点 击 j 


公 


x 


这 个 控盘 只 支持 一 次 点 击 
区 3 
2 
当 关 闭 此 弹 窗 后 再 次 点 击 按钮 ， 将 不 会 弹出 弹 窗 。 
(3) 事件 进 阶 话题 
IE 浏览 器 的 差异 和 兼容 性 问题 ， 使 得 它 对 于 事件 的 操作 与 标准 和 其 他 浏览 器 有 一 
差异 。 
在 正 下 面 绑 定 一 个 事件 监听 ， 正 9- 无 法 使 用 标准 的 addEventListener 函数 ， 而 是 使 用 


的 attachEvent， 具 体 用 法 : 
element.attachEvent(<event-name>, <callback>); 
Ph <event-name> 参数 需要 注意 ， 它 需要 为 于 


系 


二 


事件 名 称 添加 on 前 级 ， 例 如 ， 有 个 事件 


1 click， 标 准 事件 监听 函数 监听 click， 正 需要 监 
也 就 是 说 它 只 支持 监听 在 冒 泡 阶 段 触发 的 导 
时， 第 三 个 参数 传递 false。 

(4) 事件 回调 函数 的 作用 域 问题 
有 件 绑 定 在 一 起 的 回调 函数 作用 域 会 有 问题 ， 


可 调 


| 


Events in JavaScript: Removing event listeners 


件 ， 所 以 为 了 统一 ， 


折 onclick。 另 外 ， 它 没有 第 三 个 参数 ， 
在 使 用 标准 事件 监听 函数 


来 看 一 段 代 码 : 


回 


亥 是 在 user 下 的 ， 本 想 输 出 My name is 


调 函 数 调用 的 user.greeting 函数 作用 域 应 该 


结果 却 输出 了 My name is undefined。 这 是 


Bob， 结 
素 为 作用 域 执行 。 为 了 证 明 这 一 点 ， 可 以 为 当前 el 


element.firstname = 'desheng 


为 事件 绑 定 函数 时 ， 该 函数 会 以 当前 元 
ement 添加 属性 : 


再 次 点 击 ， 可 以 正确 弹出 My name is jiangshui。 


(5) 用 Javascript 模拟 触发 内 置 事件 
内 置 的 


function simulateClick() { 


1 
1 
var event = new MouseEvent('click', { 1 
wiew': window, 1 


'bubbles': true, 


"cancelable': true 


有 件 也 可 以 被 JavaScript 模拟 触发 ， 比 如 ， 下 面 函数 模拟 触发 单 击 于 


3 


伯 : 
if (canceled) { 
// A handler called preventDefault. 
alert("canceled"); 
}else{ 
// None of the handlers called 


}); preventDefault. 
var cb = document.getElementByld alert("not canceled"); 
('checkbox'); } 
var canceled = !cb.dispatchEvent(event); } 
(6) 自 定义 事件 
可 以 自 定义 事件 来 实现 更 灵活 的 开发 ， 事 件 用 好 了 可 以 是 一 件 很 强大 的 工具 ， 基 于 事 
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件 的 


是 否 
回 
应 的 


码 作 


开发 有 很 多 优势 ， 与 自 定 义 事件 的 函数 有 Event、CustomEvent 和 dispatchEvent。 
直接 自 定义 事件 ， 使 用 Event 构造 函数 : 


var event = new Event('build'); 1 var myEvent = new CustomEvent 


// Listen for the event. [eviname, Open 


i 2 a 
elem.addEventListener('build', function (e) { 代码 中 的 options 可 以 是 : 
. }, false); { | 

// Dispatch the event. detail: { 


elem.dispatchEvent(event); 
CustomEvent 可 以 创建 一 个 更 高 度 自 定 
义 事件 ， 还 可 以 附带 一 些 数据 ， 具 体 ， 
用 法 如 下 : | 


}» 
bubbles: true, 
cancelable: false 


其 中 detail 可 以 存放 一 些 初始 化 信息 ， 可 以 在 触发 时 调用 。 其 他 属性 就 是 定义 该 事件 
有 具有 冒 泡 等 功能 。 


12.3.2 ”事件 句柄 


很 多 动态 性 的 程序 都 定义 了 事件 句柄 ， 当 某 个 事件 发 生 时 ，Web 浏览 器 会 自动 调用 相 
事件 句柄 。 由 于 客户 端 JavaScript 的 事件 是 由 HIML 对 象 引 发 的 ， 因 此 事件 句柄 被 定 
这 些 对 象 的 属性 。 要 定义 在 用 户 点 击 表单 中 的 复 选 框 时 调用 事件 句柄 ， 只 需 把 处 理 代 
为 复 选 框 的 HTML 标记 的 属性 : 


<input type="checkbox" name="options" 
value="giftwrap" onclick="giftwrap=this.checked;"> 


在 这 段 代码 中 ，onclick 的 属性 值 是 一 个 字符 串 ， 其 中 包含 一 个 或 多 个 JavaScript 语句 。 


如 果 


JavaScript 代码 就 会 被 执行 。 


也 可 
句柄 。 


其 中 有 多 条 语句 ， 必 须 使 用 分 号 将 每 条 语句 隔 开 。 当 指定 的 事件 发 生 时 ， 字 符 串 的 


需要 说 明 的 是 ，HTML 的 事件 句柄 属性 并 不 是 定义 JavaScript 事件 句柄 的 唯一 方式 。 
以 在 一 个 <script> 标记 中 使 用 JavaScript 代码 ， 来 为 HIML 元 素 指 定 JavaScript 事件 
下 面 介绍 几 个 最 常用 的 事件 句柄 属性 。 

@ onclick: 所 有 类 似 按钮 的 表单 元 素 和 标记 <a> 及 <area> 都 支持 该 句柄 属 
性 。 当 用 户 点 击 元 素 时 会 触发 它 。 如 果 onclick 处 理 程序 返回 false， 则 
浏览 器 不 执行 任何 与 按钮 和 链接 相关 的 默认 动作 ， 例 如 ， 它 不 会 进行 超 
链接 或 提交 表单 。 

@ onmousedown，onmouseup: 这 两 个 事件 句柄 和 onclick 非常 相似 ， 只 不 
过 分 别 在 用 户 按 下 和 释放 鼠标 时 触发 。 大 多 数 文档 元 素 都 支持 这 两 个 事 
件 句 柄 属性 。 

@ onmouseover，onmouseout: 分 别 在 鼠标 指针 移 到 或 移出 文档 元 素 时 触发 。 

@ onchange: <input> <select> 和 <textarea> 元 素 支 持 这 个 事件 句柄 。 在 用 
户 改变 了 元 素 显示 的 值 ， 或 移出 了 元 素 的 焦点 时 触发 。 

@ onload: 这 个 事件 句柄 出 现在 <body> 标记 上 ， 当 文档 及 其 外 部 内 容 完 
载 入 时 触发 。onload 句柄 常常 用 来 触发 操作 文档 内 容 的 代码 ， 因 为 它 表 
示 文 档 已 经 达到 了 一 个 稳定 的 状态 并 且 修 改 它 是 安全 的 。 


也 
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国 12.3.3 事件 处 理 


一 旦 产生 了 事件 ， 就 要 去 处 理 ，JavaScript 事件 处 理 程序 主要 有 以 下 3 种 方式 。 
(1) HTML 事件 处 理 程序 
直接 在 HTML 代码 中 添加 事件 处 理 程序 ， 如 下 面 这 段 代 码 : 


MT 


<input id="btn1" value=" 按钮 " type="button" "onclick=""showmsg();"> 
<script> 

function showmsg() 
alert("HTML 添加 事件 处 理 "); 
} 


</script> 


从 代码 中 可 以 看 出 ， 事 件 处 理 是 直接 庶 套 在 元 素 里 的 ， 这 样 就 有 一 个 弊病 : HTML 
代码 和 js 的 耦合 性 太 强 ， 如 果 想 要 改变 js 中 showmsg， 不 但 要 在 js 中 修改 ， 还 需要 到 
HTML 中 修改 ， 一 两 处 的 修改 能 接受 ， 但 是 当代 码 达 到 万 行 级 别 的 时 候 ， 修 改 起 来 就 要 大 
费 周章 了 。 所 以 ， 不 推荐 使 用 该 方式 。 

(2) DOM0 级 事件 处 理 程序 

DOMO0 是 为 指定 对 象 添加 事件 处 理 ， 代 码 如 下 : 


<input id="btn2" value=" 按 钮 | btn2.0onclick=function(){ 

"type="button"> | alert("DOM0 级 添加 事件 处 理 ");} 

<script> | btn.onclick=null;// 如 果 想 要 删除 btn2 的 
var btn2= document.getElementByld | 点 击 事件 ， 将 其 置 为 null 即 可 

("btn2"); | </script> 


从 代码 中 可 以 看 出 ， 相 对 于 HTML 事件 处 理 程序 ，DOM0 级 事件 ，HTML 代码 和 js 
代码 的 耦合 性 已 经 大 大 降低 。 但 这 还 不 够 ， 还 需要 更 简便 的 处 理 方式 ， 下 面 就 来 说 说 第 三 
种 处 理 方法 。 

(3) DOM2 级 事件 处 理 程序 

DOM2 也 是 对 特定 的 对 象 添加 事件 处 理 程 序 ， 主 要 涉及 两 个 方法 ， 用 于 添加 和 删除 事件 
处 理 程序 的 操作 : addEventListener( 和 TemoveEventListener0。 它 们 都 接收 三 个 参数 : 要 处 理 的 
事件 名 、 作 为 事件 处 理 程序 的 函数 和 一 个 布尔 值 〈 是 否 在 捕获 阶段 处 理事 件 ) 。 

为 特定 的 对 象 添加 事件 处 理 程序 ， 代 码 如 下 : 

<input id="btn3" value=" 按钮 " type="button"> 

<script> 


var btn3=document.getElementByld("btn3"); 


btn3.addEventListener(“click”.showmsg,false):/ 这 里 我 们 把 最 后 一 个 值 置 为 false， 即 
不 在 捕获 阶段 处 理 ， 一 般 来 说 冒 泡 处 理 在 各 浏览 器 中 兼容 性 较 好 。 

function showmsgO{ 

alert(“DOM2 级 添加 事件 处 理 程序 ”); 

} 


btn3.removeEventListener(“click”,showmsg,false);/ 如 果 想 要 把 这 个 事件 删除 ， 只 需要 传 
入 同样 的 参数 即 可 。 


JavaScript 入 门 必 学 
</script> 


这 里 可 以 看 到 ， 在 添加 删除 事件 处 理 时 ， 最 后 一 种 方法 更 直接 ， 也 最 简便 。 但 需要 注 
意 的 是 ， 在 删除 事件 处 理 时 ， 传 入 的 参数 一 定 要 与 之 前 的 参数 一 致 ， 否 则 删除 会 失效 。 


| 12.4 ”课堂 练习 | 


本 章 的 课堂 练习 是 制作 一 个 在 网 页 中 停留 时 间 的 特效 ， 效 果 如 图 12-9 所 示 。 
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|0 时 1 分 2 秒 


12-9 效果 的 代码 如 下 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


<body> 
<!-- 定义 表单 名 称 forms--> 
<form name="forms"> 
<div align="left"> 
<!-- 定义 文本 框 名 称 input1--> 
<input type="text" name="input1" 
Size="10"/> 
<script> 
<I— 
var sec= 0,min= 0,hou= 0; 
flag=0; 
idt=window. 
setTimeout("update();",1000);// 每 隔 1s 刷 
新 一 次 
function update() // 定义 函数 计算 停 
留 时 间 
Sect+; 
if(sec==60){ 


sec=0; 
min+=1; 
} 
if(min==60){ 
min=0; 
hou+=1; 
} 
// 如 果 停留 时 间 少 于 1 分 钟 ， 弹 出 
提示 信息 
if((min>0)&&(flag==0)) 
{ 
window.alert(" 欢迎 光临 ! "); 
flag=1; 
} 
// 显示 停留 时 间 信息 
document.forms.input1.value=hou+" 
时 "+min+" 分 "+sec+" 秒 "; 
idt=window. 
setTimeout("update();",1000); 
JW 一 
</script> 
</div> 
</form> 
</body> 
</html> 
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强化 训练 


在 网 页 设计 中 ， 文 字 有 很 多 特效 ， 为 了 让 用 户 有 更 好 的 交互 体验 ， 设 计 师 经 常 给 文字 
或 者 背景 做 一 些 效果 ， 下 面 的 强化 练习 是 为 文字 添加 渐变 效果 。 
最 终 的 效果 如 图 12-10 所 示 。 


&l[c[®l[ ¥ 


口 无 标本 文档 x 全 
CO file///C/Users/Administrator/Desktop/h5... 会 
洪 应 用 口 建议 网 站 


十 年 生死 两 茫茫。 ! 
12-10 
操作 提示 : 
提示 代码 如 下 : 
<script language="JavaScript"> | s=s.substring(0,2); 
<!-- Hide | high=parselnt(s,10); 
function MakeArray(n){ | var left=hex[high+1]; 
this.length=n; ! Var low=x-high*16; 
for(var i=1; i<=n; i++) this[i]=i-1; | Ss=low+""; 
return this | s=S.substring(0,2); 
} | low=parselnt(s,10); 
hex=new MakeArray(16); 1 varright=hex[low+1]; 
hex[11]="A"; hex[12]="B"; hex[13]="C"; | var string=left+""+right; 
hex[14]="D"; hex[15]="E"; hex[16]="F"; | return string; 
function ToHex(x){ | } 
var high=x/16; | </script> 
var s=high+""; | 


| 本 章 结束 语 | 


本 章 主要 讲述 了 JavaScript 的 基础 知识 ， 包 括 JavaScript 的 入 门 基础 、 基 本 语法 和 事 
件 分 析 。 这 些 知识 都 是 基石 ， 想 要 深入 地 了 解 JavaScript， 就 必须 掌握 本 章 所 讲解 的 知识 ， 
打 好 基础 ， 这 样 以 后 的 内 容 学 习 起 来 才 不 会 感觉 吃力 。 


Cs 
特效 


本 章 概述 
本 章 讲解 JavaScript 函数 的 应 用 、JavaScr ipt 函数 的 定义 、 参 
数 及 调用 方法 。 本 章 还 将 讲解 一 些 网 页 典型 特效 的 使 用 方法 。 


男 学 习 目 标 

了 解 JavaScr ipt 函数 的 定义 。 
掌握 JavaScr ipt 函数 调用 方法 。 
学 会 JavaScr ipt 的 事件 分 析 。 


男 课时 安排 
理论 知识 1 课时 。 
上 机 练习 1 课时 。 


JavaScript 函数 定义 
JavaScript 函数 参数 
JavaScript 函数 调用 方法 


知识 导 图 : 
JavaScript 函数 


按钮 对 象 


选 杠 允 
JavaScript 应 用 表单 复 选 框 对 象 


\、 列 束 杠 对象 
JavaScript 的 特效 甫 


轮 播 图 效果 
字体 闪烁 效果 
妃 效果 


显示 网 页 停留 时 间 


| ”JavaScript 特 效 制作 ”|e( ”制作 定时 关闭 窗口 
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[1 JavaScript 函数 | 


JavaScript 函数 就 是 在 花 括 号 中 的 代码 块 ， 前面 使 用 关键 词 fnction: function 
functionname0 { 这 里 是 要 执行 的 代码 }。 当 调用 该 函数 时 ， 会 执行 函数 内 的 代码 。 可 以 在 


某 事件 发 生 时 直接 调用 函数 。 


国 13.1.1 JavaScript 函数 定义 


JavaScript 使 用 关键 字 function 定义 函数。 函数 可 以 通过 声明 定义 ， 也 可 以 是 一 个 表 


语法 描述 : 

function functionnamel() 
{ 

执行 代码 

} 


当 调 用 该 函数 时 ， 会 执行 函数 内 的 代码 。 可 以 在 某 事件 发 生 时 直接 调用 函数 (比如 当 


户 点 击 按钮 时 ) ， 并 且 可 由 JavaScript 在 任何 位 置 进行 调 


小 试 身手 : 关键 字 function 调用 函数 


示例 代码 如 下 : 


<!DOCTYPE html> 
<html> 

<head> 

<script> 

function myFunction() 
if 

alert(" 你 好 !"); 

} 

</script> 

</head> 

<body> 

<button onclick="myFunction()"> 试 一 试 </ 


， 使 用 花 括 号 将 其 括 起 来 。 


(1) 调用 带 参数 的 函数 


在 调用 函数 时 ， 可 以 向 其 传递 值 ， 这 些 值 被 称 为 参数 。 这 些 参 数 可 以 在 函数 中 使 


可 以 发 送 任意 多 的 参数 ， 由 逗号 (,) 分 隔 : 


button> 
</body> 
</html> 


代码 的 运行 效果 如 图 13-1 所 示 。 


aJIEISTZR 
癌 13-Lhtml x 
GC © fileV//CVUsers/AdministratorDesktop/h5.， 食 
一 | 此 网 页 显示 : 
试 


{fF! 


fnction 中 的 花 括号 是 必需 的 ， 即 使 函数 体内 只 包含 一 条 语 可 ， 也 必须 


特效 应 用 


语法 格式 如 下 : 


myFunction(argument1,argument2) 


当 声 明 函 数 时 ， 请 把 参数 作为 变量 来 声明 : 


function myFunction(varlvar2) 
{ 

代码 

. 


变量 和 参数 必须 以 一 致 的 顺序 出 现 。 第 一 个 变量 就 是 第 一 个 被 传递 的 参数 的 给 定 值 ， 


以 此 类 推 。 


小 试 身手 : 点 击 按钮 出 现 欢迎 词 的 制作 


示例 代码 如 下 : 


<!IDOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title></title> 

</head> 

<body> 

<p> 点 击 下 面 这 个 按钮 ， 来 调用 带 参数 的 
函数 。</p> 

<button onclick="myFunction(' 光 临 "网 


代码 的 运行 效果 如 图 13-2 所 示 。 


yD 13-2html x 人 
CG © filey//C/Users/Administrator/Desktop/h5... 从 


一 | 此 网 页 显示 : 
点 i 欢 氏 光 临 此 网 页 


国 


页 "> 点 击 这 里 </button> 

<script> 

function myFunction(name,job) 

{ 

alert(" 欢迎 "+name+", 此 "+job); 
1 

</script> 

</body> 

s</html> 


图 13-2 


(2) 带 有 返回 值 的 函数 


如 果 希 望 函数 将 值 返回 调用 它 的 地 方 ， 可 以 通过 使 用 return 语句 来 实现 。 在 使 用 


语法 描述 ， 
function myFunction() 
{ 
Var x=5; 


return x; 


retum 语句 时 ， 函 数 会 停止 执行 ， 并 返回 指定 的 值 。 
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} 

上 面 的 函数 会 返回 值 S。 整 个 JavaScript 并 不 会 停止 执行 ，JavaScript 从 调用 函数 的 地 

方 继续 执行 代码 。 
函数 调用 将 被 返回 值 取 代 : 


var myVar=myFunction(); 


函数 "myFunctionQ)" 所 返回 的 值 myVar 的 变量 值 是 5。 


小 试 身手 : 利用 函数 计算 数值 


示例 代码 如 下 : 
<!DOCTYPE html> ! document.getElementByld("demo"). 
<html> | innerHTML=myFunction(5,7); 
<head> | </script> 
<meta charset="utf-8"> | </body> 
<title></title> 1 </html> 
</head> | js 、 二 /二 图 
Ga | 代码 的 运行 效果 如 图 13-3 所 示 。 


<p> 调用 的 函数 会 执行 一 个 计算 ， 返 回 的 sli 
结果 为 : </p> 


<p id="demo"></p> 


口 13-3html x 
C | © filey///C/Users/Administrator/Desktop/h5..， 伍 
洪 应 用 站 建议 网 站 
<script> 
调用 的 函数 会 执行 一 个 计算 ， 返 回 的 结果 为 : 


function myFunction(a,b){ 


return a*b; ! 35 


} | 13-3 


a 


车 想 退出 西数 ， 可 使 用 retum 语 向。 2 


语法 描述 : 


function myFunction(a,b) 
EL 
if (a>b) 

{ 


return; 


} 
x=a+b 


} 
上 述 语法 中 ， 如 果 a 大 于 b， 代 码 将 退出 函数 ， 并 不 计算 a 和 b 的 总 和 。 


国 13.1.2 JavaScript 函数 参数 
JavaScript 函数 对 参数 的 值 arguments) 没有 进行 任何 的 检查 。 其 参数 与 大 多 数 其 他 语言 

的 函数 参数 的 区 别 在 于 它 不 会 关注 有 多 少 个 参数 被 传递 ， 不 关注 传递 的 参数 的 数据 类 型 。 
JavaScript 参数 的 规则 如 下 : 


特效 应 用 


@ JavaScript 函数 定义 时 参数 没有 指定 数据 类 型 。 
@ JavaScript 函数 对 隐藏 参数 (arguments) 没有 进行 检测 。 
@ JavaScript 函数 对 隐藏 参数 (arguments) 的 个 数 没有 进行 检测 。 
(1) 默认 参数 
如 果 函 数 在 调用 时 缺少 参数 , 参数 会 默认 设置 为 : undefined, 最 好 为 参数 设置 一 个 默认 值 。 


小 试 身手 : 给 参数 设置 默认 值 


示例 代码 如 下 : 
<!DOCTYPE html> | document.getElementByld("demo"). 
<html> | innerHTML = myFunction(4); 
<head> ! </script> 
<meta charset="utf-8"> | </body> 
<title></title> | </html> 
head : a 二 
pi ， 代 硒 的 运行 效果 如 图 13-4 所 示 。 
<body> 
<p> 设置 参数 的 默认 值 </p> : 帮 
<p id="demo"></p> ! 喝 js Mo 
<script> | GC |© fileyV/CVUsers/Admi.， 信 
function myFunction(x, y) { ! 洁 上 应 用 站 建议 网 站 
if (y === undefined) { ! 
a || 设置 参数 的 默认 什 
} 川 0 
return x*y; 
13-4 
也 可 以 这 样 设置 默认 参数 : 
function myFunction(x, y) { 
y=y1l0; 
} 
此 段 代码 表示 如 果 y 已 经 定义 ，yll0 返回 Y 因为 了 是 true, 否则 返回 0, 因为 undefined 
为 false。 


(2) arguments 对 象 
JavaScript 函数 有 个 内 置 的 对 象 一 -arguments 对 象 ， 如 果 函 数 调用 时 设置 了 过 多 的 参 
数 ， 参 数 将 无 法 被 引用 ， 因 为 无 法 找到 对 应 的 参数 名 ， 只 能 使 用 arguments 对 象 来 调用 。 
arguments 对 象 包含 了 函数 调用 的 参数 数组 ， 通 过 这 种 方式 可 以 很 方便 地 找到 最 后 一 
个 参数 的 值 。 


小 试 身手 : 设置 查找 值 的 函数 


示例 代码 如 下 : 


<!DOCTYPE html> 
<html> 


<head> 


值 ( 
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<meta charset="utf-8"> return max; 


<title></title> } 

</head> 4 document.getElementByld("demo"). 
<body> | innerHTML = findMax(4, 5, 6); 

<p> 查找 最 大 的 数 。</p> . </script> 

<pid="demo"></p> | </body> 

<script> </html> 


var i, max = arguments[0]; [Laj[=[ 回 | RI 


if(arguments.length < 2){ D 13-5.html 汪 


j CO fileV//CVUsers 人 Admi.， 食 


for (i= 1;i< arguments.length; i++){ 


1 
return max; 1 


深 应 用 六 建议 网 站 


if (arguments[i] > max) { bh 


max = arguments[i]; | 查找 最 大 的 数 。 
} | 6 


1 


(3) 通过 值 传递 参数 
在 函数 中 调用 的 参数 是 函数 的 参数 ， 如 果 函 数 修改 参数 的 值 ， 将 不 会 修改 参数 的 初始 
在 函数 外 定义 ) 。 
示例 代码 如 下 : 
var X= 1; 

// 通过 值 传递 参数 
function myFunction(x) { 

x++; // 修改 参数 x 的 值 ， 将 不 会 修改 在 函数 外 定义 的 变量 x 

console.log(x); 


} 
myFunction(x); // 2 
console.log(x); // 1 


JavaScript 函数 传递 值 只 是 将 参数 的 值 传 入 函数 ， 函 数 会 另外 配置 内 存 保存 参数 值 ， 


所 以 并 不 会 改变 原 参 数 的 值 。 


始 的 


(4) 通过 对 象 传递 参数 
在 JavaScript 中， 可 以 引用 对 象 的 值 ， 因 此 在 函数 内 部 修改 对 象 的 属性 就 会 修改 其 初 


值 ， 修 改 对 象 属性 可 作用 于 函数 外 部 〈 全 局 变量 ) 。 
示例 代码 如 下 : 

var obj = {x:1}; 

// 通过 对 象 传递 参数 


function myFunction(obj) { 
obj.x++; // 修改 参数 对 象 obj.x 的 值 ， 函 数 外 定义 的 obj 也 将 会 被 修改 
console.log(obj.x); 

myFunction(obj); // 2 

console.log(obj.x); // 2 


特效 应 用 


13.1.3 JavaScript 函数 调用 方法 
在 JavaScript 中 ， 函 数 的 调用 方法 有 4 种 函数 模式 、 方 法 模式 、 构 造 器 模式 和 上 下 


文 模式 。 


(1) 函数 模式 
函数 模式 是 一 个 简单 的 函数 调用 ， 函 数 名 的 前 面 没有 任何 引导 内 容 。 
语法 描述 : 
function foo () {0} 
var func = function () {}; 


foo(); 
func(); 
(function (){D)0); 


此 语法 中 this 的 含义 是 : 在 函数 中 this 表示 全 局 对 象 ， 在 浏览 器 中 是 Window。 
(2) 方法 模式 

方法 一 定 是 依附 于 一 个 对 象 ， 将 函数 赋值 给 对 象 的 一 个 属性 ， 那 么 就 成 为 了 方法 。 

语法 描述 : 

function f() { 


this.method = function () {}; 

} 

varo={ 

method: function () 他 

} 
此 语法 中 this 的 含义 是 : 这 个 依附 的 对 象 。 

(3) 构造 器 模式 
在 创建 对 象 时 ， 由 于 构造 函数 只 是 给 this 添加 成 员 ， 没 有 做 其 他 事情 ， 而 方法 也 可 以 


完成 这 个 操作 ， 就 this 而 言 ， 构 造 函 数 与 方法 没有 本 质 区 别 。 


特征 : 
@ 使 用 new 关键 字 .来 引导 构造 函数 。 
@ 构造 函数 中 发 this 与 方法 中 一 样 , 表示 对 象 , 但 是 构造 函数 中 的 对 象 是 刚 
刚 创建 出 来 的 对 象 。 
e@ 构造 函数 中 不 需要 return， 就 会 默认 的 etum this。 
若 手 动 的 添加 retum: 则 相当 于 retum this。 
若 手动 的 添加 retum 基本 类 型 : 无 效 ， 还 是 保留 原来 返回 this。 
若 手动 添加 return null: 或 return undefiend， 无 效 。 
若 手动 添加 retum 对 象 类 型 : 则 原来 创建 的 this 就 会 被 丢掉 ， 返 回 的 是 Tetum 后 面 的 


对 象 。 


(4) 上 下 文 模式 
上 下 文 就 是 环境 ， 就 是 自 定义 设置 this 的 含义 。 
语法 描述 : 
函数 名 .apply( 对 象 ,[ 参数 ]); 


函数 名 .call( 对 象 ， 参 数 ); 
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上 述 语法 中 函数 名 的 合 义 : 

e@ 函数 名 就 是 表示 函数 本 身 ， 使 用 函数 进行 调用 时 默认 this 是 全 局 变量 。 

@ 函数 名 也 可 以 是 方法 提供 ， 使 用 方法 调用 时 ，this 是 指 当前 对 象 。 

@ 使 用 apply 进行 调用 后 ， 无 论 是 函数 ， 还 是 方法 都 无 效 了 。this 由 apply 
的 第 一 个 参数 决定 。 


”如 果 却 数 或 方法 中 没有 this 的 操作 ， 那 么 无 论 什么 函数 调用 其 实 部 一 
| 样 ; 如 果 是 函数 调用 foo(0)， 就 类 似 foo.apply(window); 如 果 是 方法 调用 


o.method0)， 就 类 似 o.method.apply(o)。 


le JavaScript 应 用 表单 | 


表单 是 用 户 与 Web 页 面 交 互 最 频繁 的 页 面 


元 素 之 


前 在 互联 网 中 的 所 有 页 面 上 


都 应 用 到 了 表单 及 表单 元 素 ， 之 前 的 章节 讲 了 表 
于 JavaScript 对 象 。 


按钮 对 象 


国 13.2.1 


目前 最 常 使 用 的 按钮 就 是 提交 按钮 ， 在 一 个 表单 中 ， 为 了 防止 


的 详细 用 法 ， 本 节 讲 解 表单 元 素 如 何 应 


户 在 表单 填写 完毕 之 


前 误 点 了 提交 这 种 情况 的 发 生 ， 通 常 都 需要 验证 ， 


进行 必 填 项 检测 ， 并 控制 按钮 的 默认 行为 。 
小 试 身手 : 设置 表单 的 按钮 对 象 
示例 代码 如 下 : 


<html> 
<body> 


<form id="autoForm" > 


用 户 和 名: <input type="text" 
name="userName" /> 
密 码 : <input type="password" 


name="userPwd" /> 

<input type="submit" value=' 提交 '> 
</form> 

<script> 
autoForm.elements[autoForm.elements. 
length-1].onclick = function(e){ 

// 检测 必 填 项 


最 简单 的 方法 就 是 在 单 击 提交 按钮 的 时 


if(autoForm.userName.value == "" || 


autoForm.userPwd.value == ""){ 
alert(" 用 户 名 / 密码 不 能 为 空 ! "); 
// 阻止 默认 行为 

if(e) 

e.preventDefault();// 标准 方式 

else 


event.returnValue = false;/IE 方式 
1 

1 

</script> 

</body> 

</html> 


特效 应 用 


代码 的 运行 效果 如 图 13-6 所 示 。 
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GCG | © filey///C:/Users/Administrator/Desktop/h5+c3+js 网 页 设计 三 .。 会 
Dm 示 : 


用 户 名 :| Resmiense! 
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显示 效果 是 没有 填写 用 户 名 和 密码 时 出 现 的 提示 。 


国 13.2.2 复 选 框 对 象 


复 选 框 通常 用 于 批量 的 数据 传递 或 者 批量 的 数据 处 理 ， 那 么 该 如 何 运 用 JavaScript 来 


控制 这 些 复 选 框 呢 ? 
小 试 身手 : 设置 复 选 框 的 对 象 方法 
示例 代码 如 下 : 
<!ldoctype html> ! var selector = document. 
<html> 1 getElementByld('selector); 
<head> selector.onclick = function(){ 


<meta charset="utf-8"> for(var i=0;i<autoForm.elements.length;i++) 


<title> 无 标题 文档 </title> { 

</head> autoForm.elements[i].checked = this. 

<body> checked; 

<form id="autoForm" > } 

全 选 /不 选 <input type="checkbox" } 

id="selector"><br/> </script> 

<hr> </body> 

<label> 数据 记录 1<input type="checkbox" </html> 

></label><br/> 2 2 

<label> 数据 记录 2<input type="checkbox" 代码 的 运行 效果 如 图 13-7 所 示 。 

></label><br/> ; 避 j [全 | 加 | % 

<label> 数据 记录 3<input type="checkbox" fa 人 
CO filey//C/Users/Admini.. 全 | : 


></label><br/> 
<label> 数据 记录 4<input type="checkbox" 
></label><br/> 
<label> 数据 记录 5<input type="checkbox" 
></label><br/> 


洪 应 用 间 建议 网 站 
全 选 /不 选 图 


<label> 数据 记录 6<input type="checkbox" 数据 记录 3 回 
></label><br/> 数据 记录 4 四 

数据 记录 5 加 
</form> 数据 记录 6 加 
<script> 


3 


图 13.2.3 ”列表 框 对 象 


列表 框 在 HTML 中 通常 表现 为 下 拉 列 表 框 ， 如 果 想 使 用 列表 来 改变 页 面 行为 可 以 通 
过 监听 列表 事件 来 执行 相应 的 处 理 。 


小 试 身手 : 设置 列表 框 对 象 的 


示例 代码 如 下 : 


<ldoctype html> 

<html> 

<head> 

<meta charset= "utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<style> 

body{ 

border:none; 

overflow:hidden; 

} 

select{ 

width:150px; 

float:left; 

} 

#block{ 

width:100px; 

height:100px; 

border:1px solid #000; 

float:right; 

} 

</style> 

<select id="selector" multiple size=6> 
<option style="background:#000" 
value="0x000"></option> 

<option style="background:#fff" 
value="Oxfff"></option> 

<option style="background:#f00" 
value="0xf00"></option> 

<option style="background:#0f0" 
value="0x0f0"></option> 

<option style="background:#00f" 
value="0x00f"></option> 

<option style="background:#ff0" 
value="0xff0"></option> 

<option style="background:#0ff" 
value="0xOff"></option> 


方法 


<option style="background:#f0f" 
value="OxfOf"></option> 

</select> 

<div id="block"> 

</div> 

<script> 

var baseColor = Ox000; 

var colorSelector = document. 
getElementByld("selector"); 
colorSelector.onchange = function(}{ 

for(var i=0;i<this.options.length;i++){ 
if(this.options[i].selected) 

baseColor ^= parselnt(this.options[i].value); 
} 

baseColor = baseColor.toString(16); 


if(baseColor.length == 1)baseColor 


"00"+baseColor; 


if(baseColor.length == 2)baseColor 


"0"+baseColor; 
document.getElementByld('block').style. 
background = "#"+baseColor; 

} 

</script> 

</body> 

</html> 


代码 的 运行 效果 如 图 13-8 所 示 。 
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图 13-8 
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特效 应 用 


EE JavaScript 事件 分 析 | 


JavaScript 事件 就 是 网 页 中 经 常用 到 的 网 页 效果 ， 比 如 轮 播 图 效果 、 字 体 闪烁 效果 、 
鼠标 滑 过 效果 等 。 


国 13.3.1 轮 播 图 效果 


图 片 轮 播 经 常 在 众多 网 站 中 看 到 ， 各 种 轮 播 特效 在 有 限 的 空间 内 展示 了 几 倍 于 空间 大 小 
的 内 容 ， 并 且 有 着 良好 的 视觉 效果 。 其 实 轮 播 图 的 写法 有 很 多 ， 这 里 举 一 个 比较 简单 的 例子 。 


小 试 身手 : 制作 一 个 网 页 的 轮 播 图 


轮 播 图 的 ， 代 码 如 下 : 


<div class="container"> ! <span>4</span> 
<div class=” wrap” style=" left: | <span>5</span> 
-600px;”> | </div> 


ni 全 可 
<img src="test1.jpg" alt=""> <a href="javascript:;" rel="external 


<img src="test2.jpg" alt=""> nofollow" rel="external nofollow" 


on "pel=" 
<img src="test3.jpg" alt=""> rel="external nofollow" rel="external 


<img src="test4.jpg" alt=""> nofollow" class="arrow arrow_left"><</a> 


<img src="test5.jpg" alt=""> <a href="javascript:;" rel="external 


<img src="test3.jpg" alt=""> nofollow" rel="external nofollow" 


<img src="test1.jpg" alt=""> rel="external nofollow" rel="external 


nofollow" class="arrow arrow_right">></a> 


</div> 
<div class="buttons"> Ha 
<span class="on">1</span> | CSS 部 分 : 
<span>2</span> | CSS 样式 部 分 (图片 组 的 处 理 ) 与 淡 


<span>3</span> ! 

入 淡出 式 不 同 ， 淡 入 淡出 只 需要 显示 或 者 隐藏 对 应 序号 的 图 片 即 可 ， 直 接 通 过 display 来 
设 定 。 

左右 切换 式 则 是 采用 图 片 浮动 ， 父 层 元 素 UU 总 宽 为 总 图 片 宽 ， 并 设 定 为 有 限 
banner 宽度 下 隐藏 超出 宽度 的 部 分 。 

当 想 切换 到 某 序 号 的 图 片 时 ， 则 采用 其 刀 定 位 left 样式 设 定 相应 属性 值 实现 。 

例如 ， 显 示 第 一 张 图 片 ， 初 始 定位 left 为 0px, 要 想 显示 第 二 张 图 片 则 需要 left:-400px 
处 理 。 

示例 代码 如 下 : 


<style> 
Et 
margin:0; 
padding:0; 
} 
af 


text-decoration: none; 


} 

.container { 
position: relative; 
width: 600px; 
height: 400px; 
margin:100px auto 0 auto; 
box-shadow: 0 0 5px green; 
overflow: hidden; 

} 

.Container .wrap { 
position: absolute; 
width: 4200px; 
height: 400px; 
z-index: 1; 

} 

.container .wrap img { 
float: left; 
width: 600px; 
height: 400px; 

} 

.Container .buttons { 
position: absolute; 
right: Spx; 
bottom:40px; 
width: 150px; 
height: 10px; 
z-index: 2; 

} 

.Container .buttons span { 
margin-left: 5px; 
display: inline-block; 
width: 20px; 
height: 20px; 
border-radius: 50%; 
background-color: green; 
text-align: center; 
color:white; 
cursor: pointer; 

} 

.Container .buttons span.on{ 
background-color: red; 

} 

.Container .arrow { 
position: absolute; 
top: 35%; 


color: green; 
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padding:O0px 14px; 
border-radius: 50%; 
font-size: 50px; 
z-index: 2; 


display: none; 


.Container .arrow_left { 
left: 10px; 


.container .arrow_right { 
right: 10px; 


.Container:hover .arrow { 
display: block; 


.Container .arrow:hover { 
background-color: rgba(0,0,0,0.2); 


</style> 
JavaScript 部 分 : 
页 面 已 经 构建 好 , 可 以 进行 js 的 处 理 。 
全 局 变量 制作 : 


var curlndex = 0, // 当前 index 
imgArr = getElementsByClassName("img 
List")[0].getElementsByTagName("li"), // 获 
取 图 片 组 
imgLen = imgArr.length, 
infoArr = getElementsByClassNamel"info 
List")[0].getElementsByTagName("li"), // 获 
取 图 片 info 组 
indexArr = getElementsByClassName("in 
dexList")[0].getElementsByTagName("li"); // 
获取 控制 index 组 
自动 切换 定时 器 处 理 
// 定时 器 自动 变换 2.5 秒 每 次 
var autoChange = setInterval(function(){ 
if(curlIndex < imgLen -1){ 
curlndex ++; 
}else{ 
curlndex = 0; 
} 
// 调用 变换 处 理 函数 
changeTo(curlndex); 
},2500); 
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同样 的 ， 有 一 个 重 置 定时 器 的 函数 
// 清除 定时 器 时 候 的 重 置 定时 器 -- 封装 
function autoChangeAgain(){ 
autoChange = setinterval(function(){ 
if(curlndex < imgLen -1){ 
curlndex ++; 
Jelse{ 
curlndex = 0; 
} 
// 调用 变换 处 理 函 数 
changeTo(curlndex); 
},2500); 
} 
因为 有 一 些 class， 所 以 来 几 个 class 函数 
的 模拟 也 是 需要 的 
// 通过 class 获取 节点 
function getElementsByClassName(classNa 
me}{ 
var classArr = []; 
var tags = document. 
getElementsByTagName('*"); 
for(var item in tags){ 
if(tags[item].nodeType == 1){ 
if(tags[item].getAttribute('class') == 
className){ 
classArrpush(tags[item]); 
} 
} 
} 
return classArr; // 返回 
} 


// 判断 obj 是 否 有 此 class 
function hasClass(obj,cls){ //class 位 于 单 
词 边界 
return obj.className.match(new 
RegExp('(\\s1)' + cls + '(\\s1$)")); 
} 
// 给 obj 添 加 class 
function addClass(obj,cls){ 
if(!this.hasClass(obj,cls))}{ 
obj.className += cls; 
} 
} 
// 移 除 obj 对 应 的 class 


function removeClass(obj,cls}{ 
if(hasClass(obj,cls)}{ 
var reg = new RegExp('(\\s|^)' + cls + 
"(Ws19)); 
obj.className = obj.className. 
replace(reg,"); 
于 


要 左右 切换 ， 就 得 模拟 jq 的 animate-- 
>left . 
思路 就 是 动态 地 设置 element.style.left 
进行 定位 。 因 为 要 有 一 个 渐进 的 过 程 ， 
所 以 加 上 一 点 阶段 处 理 。 
定位 时 left 的 设置 也 较为 复杂 ， 要 考虑 
方向 等 情况 : 


// 图 片 组 相对 原始 左 移 dist px 距离 
function goLeft(elem,dist){ 

if(dist == 400){ // 第 一 次 时 设置 left 为 Opx 
或 者 直接 使 用 内 赔 法 style="left:0;" 
elem.style.left = "Opx"; 

} 

var toLeft; // 判断 图 片 移动 方向 是 否 为 左 
dist = dist + parselnt(elem.style.left); // 
片 组 相对 当前 移动 距离 

if(dist<O){ 

toLl7 = Math.abs(dist); 

}else{ 

toLeft = true; 

} 

for(var i=0;i<= dist/20;it+){ // 这 里 设 定 缓 
慢 移动 ，10 阶 每 阶 40px 

(function(_i){ 

var pos = parselnt(elem.style.left); // 获取 
当前 left 

setTimeout(function(){ 

pos += (toLeft)? -Li* 20) : (_i* 20); // 根据 
toLeft 值 指定 图 片 组 位 置 改 变 
//console.log(pos); 


elem.style.left = pos + "px"; 

]} ji* 25); // 每 阶 间隔 50 毫秒 
DD); 

上 


初始 left 的 值 为 0px， 如 果 未 初始 或 者 


报错 取 不 到 。 


巴 初始 的 left 值 写 在 行内 CSS 样式 表 里 ， 就 会 


所 以 直接 在 js 中 初始 化 或 者 在 HTML 中 内 谈 初始 化 即 可 。 


接 下 来 就 是 切换 的 函数 实现 了 ， 比 如 要 切换 到 序号 为 num 的 


// 左右 切换 处 理 函数 

function changeTo(num){ 

// 设置 image 

var imgList = getElementsByClassName("im 
BList")[O]; 

goLeft(imgList,num*400); // 左 移 一 定 距离 
// 设置 image 的 info 
varcurlnfo=getElementsByClassNamel("info 
on")[0]; 

removeClass(curlnfo,"infoOn"); 
addClass(infoArr[num],"infoOn"); 

// 设置 image 的 控制 下 标 index 

var _curlndex = getElementsByClassNamel("'i 
ndexOn")[0]; 
removeClass(_curindex,"indexOn"); 
addClass(indexArr[num],"indexOn"); 

} 

然后 再 给 左右 箭头 还 有 右 下 角 那 堆 index 
绑 定 事件 处 理 

// 给 左右 箭头 和 右 下 角 的 图 片 index 添加 
事件 处 理 

function addEvent(){ 

for(var i=0;i<imgLen;i++){ 

// 闭 包 防止 作用 域内 活动 对 象 tem 的 影 
响 

(function(_i)}{ 

// 鼠标 滑 过 则 清除 定时 器 ， 并 作 变 换 处 
理 

indexArr[_i].onmouseover = function(){ 
clearTimeout(autoChange); 

changeTo( i); 

curlindex = _i; 

上 

// 鼠标 滑 出 则 重 置 定时 器 处 理 
indexArr[_i].onmouseout = function(){ 
autoChangeAgain(); 


上 

Di); 

} 

// 给 左 箭头 prev 添加 上 一 个 事件 

Var prev = document. 


网 


片 。 


getElementByld("prev ); 


prev.onmouseover = function(){ 

// 滑 入 清除 定时 器 
clearlnterval(autoChange); 

b 

prev.onclick = function(){ 

// 根据 curindex 进行 上 一 个 图 片 处 理 
curindex=(curindex>0)? (-curindex) : (imgLen -1); 
changeTo(curlndex); 

上 

prevonmouseout = function(){ 

// 滑 出 则 重 置 定时 器 

autoChangeAgain(); 

上 

// 给 右 箭头 next 添加 下 一 个 事件 

var next = document. 
getElementByld("next"); 
next.onmouseover = function(){ 
clearlnterval(autoChange); 

} 

next.onclick = function(){ 

curlndex = (curindex < imgLen - 1) ? 
(++curlndex) : 0; 

changeTo(curIndex); 

机 

next.onmouseout = function(){ 


autoChangeAgain(); 


bp 
中 
代码 的 运行 效果 如 图 13-9 所 示 。 
a EEE 
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特效 应 用 


国 13.3.2 ”字体 闪烁 效果 
在 网 页 中 ， 为 了 更 好 地 吸引 用 户 的 注意 力 ， 设 计 者 会 把 重要 的 信息 添加 效果 ， 比 如 闪 


小 试 身手 : 制作 文字 的 闪烁 效果 
示例 代码 如 下 : 
<html> ! flag= 1; 
<head> ! jelse{ 
<meta charset="gb2312" /> ! text.style.color = ""; 
<title>js 实现 文字 闪烁 特效 </title> ; text.style.background = ""; 
</head> | flag =0; 
<script> } 
var flag = 0; ! setTimeout("start()",500); 
function start(){ | 3 
var text = document. ! </script> 
getElementByld("myDiv"); | <body onload="start()"> 
if (Iflag) | <span id="myDiv">JavaScript 的 世界 是 如 
1 ! 此 的 精彩 ! </span> 
text.style.color = "red"; | </body> 
text.style.background = "#0000ff"; ; </html> 


代码 的 运行 效果 如 图 13-10 所 示 。 


/中 js 到 文字 R45 效 
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国 13.3.3 鼠标 滑 过 效果 
网 页 中 为 了 突出 某 件 商品 的 重要 性 ， 通 常会 给 商品 的 图 片 做 出 效果 ， 最 常见 的 是 给 图 


片 做 出 震动 的 效果 。 
小 试 身手 : 制作 鼠标 划 过 图 片 的 震动 效果 
示例 代码 如 下 : 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 


<title> 鼠标 滑 过 图 片 震动 效果 </title> 
<style>.shakeimage { 

POSITION: relative 

} 

</style> 

</head> 

<body> 


<script language=JavaScript1.2> 

<!- 

var rector=3 

var stopit=0 

Var a=1 

function init(which){ 

stopit=0 

shake=which 

shake.style.left=0 

shake.style.top=0 

} 

function rattleimage(){ 

if ((ldocument.all&&!document. 
getElementByld)| |stopit==1) 

return 

if (a==1){ 
shake.style.top=parselnt(shake.style. 
top)+rector 

} 

else if (a==2){ 
shake.style.left=parselnt(shake.style. 
left)+rector 

L 

else if (a==3){ 
shake.style.top=parselnt(shake.style.top)- 
rector 

} 


else{ 
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shake.style.left=parselnt(shake.style.left)- 
rector 

1 

if (a<4) 

at+ 

else 

a=1 

setTimeout("rattleimage()",50) 

} 

function stoprattle(which){ 

stopit=1 

which.style.left=0 

which.style.top=0 

} 

//-> 

</script>> 

<img 

class="shakeimage" onMouse 
Over="init(this);rattleimage()" 
onMouseOut="stoprattle(this)" src="test1. 


jpg" border="0" style="cursor:pointer;"/> 


"shakeimage" onMouse 


init(this);rattleimagel()" 


onMouseO 


="stoprattle(this)" src="test2. 


jpg" border="0" style="cursor:pointer;"/> 
<img 

class="shakeimage” onMouse 
Over="init(this);rattleimage()" 


onMouseOut="stoprattle(this)" src="test3. 


jpg" border: 
</body> 
</html> 


代码 的 运行 效果 如 图 13-11 所 示 。 


style="cursor:pointer;"/> 


图 13-11 


特效 应 用 


| 13.4 _ JavaScript 特效 制作 | 


在 设计 网 页 中 也 会 用 到 时 间 的 特效 和 窗口 的 特效 ， 即 显示 用 户 在 网 页 中 停留 的 时 间 、 
显示 当前 的 日 期 和 窗口 自动 关闭 等 。 


图 13.4.1 显示 网 页 停留 时 间 


显示 网 页 停留 时 间 相 当 于 设计 一 个 计时 器 ， 用 于 显示 浏览 者 在 该 页 面 停留 了 多 长 时 间 。 

思路 是 设置 三 个 变量 : second,minute,hour。 然 后 让 second 不 停 地 +1， 并 且 利 用 
setTimeout 实现 页 面 每 隔 一 秒 刷新 一 次 ， 当 second 大 于 等 于 60 时 ，minute 开始 +1， 并 且 
让 second 重新 置 零 。 同 理 当 minute 大 于 等 于 60 时 , hour 开始 +1。 这 样 即 可 实现 计时 功能 。 


小 试 身手 : 制作 所 在 网 页 停留 的 时 间 


示例 代码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 显示 停留 时 间 </title> 

</head> 

<body> 

<form name="form1" method="post" action=""> 

<center> 

<p><font size="5" color="#0000FF" face=" 华文 细 黑 "> 您 在 本 站 已 停留 : </font></p> 
<p> 

<input name="textarea" type="text" value=""> 

</p> 

</center> 

<script language="javascript"> 

var second=0; 

var minute=0; 

var hour=0; 

window.setTimeout("interval();",1000);// 设置 时 间 一 秒 刷 新 一 次 
function interval()// 设置 计时 器 

{ 

second++; 

if(second==60) 

{ 

second=0;minute+=1; 

if(minute==60) 

{ 

minute=0;hour+=1; 

外 

document.form1.textarea.value = hour+" 时 "+minute+" 分 "+second+" 秒 ";// 将 计时 器 的 数值 显 
示 在 form 表单 中 


window.setTimeout("interval();",1000); // 设置 时 间 一 秒 刷 新 一 次 


} 
</script> 
</form> 
</body> 
</html> 


代码 的 运行 效果 如 图 13-12 所 示 。 
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国 13.4.2 制作 定时 关闭 窗口 


定时 关闭 窗口 经 常 出 现在 网 页 的 一 些 广告 中 。 


小 试 身手 : 制作 定时 关闭 窗口 


示例 代码 如 下 : 


<!doctype html> 


<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<script type="text/javascript"> 


function webpageClose(){ 
window.close(); 


} 


setTimeout( webpageClose,10000)//10s 钟 


后 关闭 
</script> 
</head> 
<body> 


<p> 窗口 在 10 秒 后 自动 关闭 </p> 


</body> 
</html> 


代码 的 运行 效果 如 


图 13-13 所 示 。 
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窗口 在 10 秒 后 自动 关闭 


图 13-13 


特效 应 用 


| 13.5 “课堂 练习 | 


本 章 讲 解 了 JavaScript 的 应 用 ， 根 据 所 学 的 JavaScript 知识 ， 制 作出 如 图 13-14 所 示 
的 效果 。 
图 13-14 中 所 示 的 倒计时 特效 可 以 让 用 户 明确 知道 距离 某 个 日 期 剩余 的 时 间 。 


口 无 标 时 文档 x 全 
C © fileVW/CVUserwAdministratorDeskt… 公 | : 


现在 高 2018 年 指定 日 期 还 有 : 171 天 


图 13-14 
代码 如 下 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


<body> 
<script> 
var timedate = new Date("October 1,2018"); // 设置 倒计时 时 间 为 2018 年 10 月 1 日 
var times=" 指定 日 期 "; // 设置 time 变量 
var now=new Date(); // 获得 当前 时 间 
var date=timedate.getTime() - now.getTime(); // 获得 剩余 时 间 
var time = Mathfloor(date/(1000*60*60*24)); // 将 剩余 时 间 转 化 为 天 数 
if(time>=0); 
// 显示 倒计时 时 间 信息 
document.write(" 现在 离 2018 年 "+times+" 还 有 : "+ 
"<font color=red><b>"+time+"</b></font> 天 "); 
</script> 
<!-- 利用 var date= timedate.getTime()-now.getTime() 可 以 获得 剩余 时 间 ， 由 于 时 间 是 以 毫秒 为 
单位 计算 的 ， 因 此 换算 率 如 下 : 
1 天 =24 小 时 ，1 小 时 =60 分 钟 ，1 分 钟 =60 秒 ，1 秒 =1000 毫秒 --> 
< 上 -利用 var time=Math.floor(date/(1000*60*60*24)) 将 剩余 时 间 转 换 为 剩余 天 数 。--> 
</body> 
</html> 


240/240 


强化 训练 


在 设计 网 页 中 ， 为 了 用 户 有 更 好 地 交互 体验 ， 设 计 师 们 也 是 煞费苦心 ， 此 强化 练习 就 
是 为 此 准备 的 颜色 自 定义 的 设 定 。 
效果 如 图 13-15 所 示 。 
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图 13-15 


用 户 可 以 随意 选择 自己 喜欢 的 背景 色 ， 在 点 击 颜色 时 ， 网 页 的 左下 方 会 同步 显示 
颜色 值 。 
提示 代码 如 下 : 


<script LANGUAGE="JavaScript"> 

var hex=new Array(6) 
hex[0]="FF";hex[1]="CC";hex[2]="99";hex[3]="66";hex[4]="33";hex[5]="00" 
function display(triplet){ 


document.bgColor='"#'+triplet 

mowang.innerText=" 现在 的 背景 颜色 为 #"+triplet} 

function drawCell(red, green, blue) { 

document.write('<TD BGCOLOR="#" + red + green + blue + ">') 
document.write('<A HREF="javascript:display(\" + (red + green + blue) + \')">') 
document.write('<IMG SRC="photo/place.gif" BORDER=0 HEIGHT=12 WIDTH=12>') 
document.write('</A>') 

document.write('</TD>")} 

function drawRow!(red, blue){ 

document.write('<TR>') 

for (var i=0; i < 6; ++i) { 

drawCell(red, hex[i], blue)} 

document.write('</TR>")} 


</script> 


| 本 章 结束 语 | 


本 章 主要 讲解 了 JavaScript 在 网 页 中 的 实际 应 用 ， 比 如 轮 播 图 的 效果 、 闪 烁 的 效果 、 
鼠标 滑 过 的 效果 、 窗 口 特效 和 时 间 特 效 ， 这 些 知 识 都 是 会 经 常用 到 的 。 


和 全 时 度 民 汪 之 
综合 实践 应 用 


SUMMARY 


学 习 了 前 面 章 节 的 内 容 ， 本 章 就 来 做 一 个 练习 一 一 本 练习 主要 运 
用 了 HTML5 中 的 canvas 绘图 功能 


男 学 习 目标 
分 析 一 个 效果 如 何 设置 样式 。 
掌握 canvas 和 JavaScript 结合 使 用 的 方法 。 


男 课时 安排 
理论 知识 1 课时 。 
上 机 练习 1 课时 。 


知识 导 图 : 


分 析 流星 的 尾部 
制作 一 颗 流 星 绘制 一 颗 星 


制作 流星 十 
制作 一 场 流星 雨 鼠标 移动 的 效果 


| 14.1 制作 一 颗 流星 | 


画 一 场 流星 十 自然 要 会 画 一 颗 流星 。 使 用 canvas 可 以 画 圆 形 、 形 、 画 线条 ， 
但 流星 是 有 尾巴 的 ， 该 怎么 操作 呢 ? 


国 14.1.1 “分析 流星 的 尾部 
颗 流星 的 效果 如 图 14-1 所 示 。 
流星 因为 速度 过 快 产生 大 量 的 热量 进 


热 ， 所 以 飞 过 的 
像 上 


而 带动 周围 的 空气 发 光 发 热 
地 方 看 起 来 就 像 是 流星 的 尾巴 。 该 


区 


的 整个 流星 处 己 的 运动 轨迹 之 中 ， 当 
前 的 位 置 最 亮 ， 轮 廓 最 清晰 ， 而 之 前 划 过 
的 地 方 离 当前 位 置 轨迹 距离 越 远 ， 就 越 暗 
淡 ， 越 模糊 。 


国 14.1.2 ”绘制 一 颗 流星 


流星 经 过 的 地 方 会 越 来 越 模糊 ， 最 后 消失 不 见 ， 


canvas 上 是 每 一 帧 名 


帧 就 变 模糊 一 点 而 不 是 全 部 清楚 的 方 


怖 之 间 的 时 间 间隔 很 


有 没有 可 以 让 图 像 每 过 


法 ? 如果 可 以 ， 就 能 把 每 一 帧 用 线段 画 
在 canvas 上 做 出 的 效果 的 代码 如 下 : 


// 坐标 
class Crood { 
constructor(x=0, y=0) { 
this.x = x; 
thisy =y; 
} 
setCrood(x, y) { 
this.x =x; 
thisy =y; 
} 


copy() { 
return new Crood(this.x, this.y); 


// 流星 


小 段 流星 的 运动 轨迹 


全 
， 最 后 画 出 流星 的 效果 。 


class ShootingStar { 
constructor(init=new Crood, final=new 
Crood, size=3, speed=200, onDistory=null) { 
this.init = init; // 初始 位 置 
this.final = final; // 最 终 位 置 
this.size = size; // 大 小 
this.speed = speed; // 速度 : 像素 /s 


// 飞行 总 时 间 
this.dur = Math.sqrt(Math.pow(this. 
final.x-this.init.x, 2) + Math.pow(this.final. 
y-this.init.y, 2)) * 1000 / this.speed; 


this.pass = 0; // 已 过 去 的 时 间 
this.prev = this.init.copy(); // 上 一 帆 位 


置 
this.now = this.init.copy(); // 


this.onDistory = onDistory; 
} 
draw(ctx, delta) { 
this.pass += delta; 
this.pass = Math.min(this.pass, this. 
dur); 


let percent = this.pass / this.dur; 


this.now.setCrood( 
this.init.x + (this.final.x - this.init.x) * 
percent, 
this.init.y + (this.final.y - this.init.y) * 
percent 


); 


// canvas 

ctx.strokeStyle = '#fff"; 

ctx.lineCap = 'round'; 
ctx.lineWidth = this.size; 
ctx.beginPath(); 
ctx.moveTol(this.now.x, this.now.y); 
ctx.lineTo(this.prev.x, this.prev.y); 


ctx.stroke(); 


this.prev.setCrood(this.now.x, this.now. 
»); 
if (this.pass 


this.dur) { 
this.distory(); 


} 
distory(){ 
this.onDistory && this.onDistory(); 


// effet 
let cvs = document.querySelector('canvas'); 
let ctx = cvs.getContext('2d'); 


let T; 


let shootingStar = new ShootingStar( 
new Crood(100, 100), 
new Crood(400, 400), 
3, 
200, 


()=>{cancelAnimationFrame(T)} 


); 


let tick = (function() { 
let now = (new Date()).getTime(); 
let last = now; 
let delta; 
return function() { 
delta = now - last; 
delta = delta > 500 ? 30 : (delta < 16? 
16 : delta); 
last = now; 


// console.log(delta); 


T= requestAnimationFrameltick); 
ctx.save(); 
ctx.fillstyle = 'rgba(0,0,0,0.2)'; // 每 一 
帧 用 " 半 透 明 " 的 背景 色 清除 画布 
ctx.fillRect(0, 0, cvs.width, cvs.height); 
ctx.restore(); 


shootingStar.draw(ctx, delta); 


} 
D0); 
tick(); 


代码 的 运行 效果 如 图 14-2 所 示 。 


图 14-2 
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L14.2 ”制作 一 场 流星 雨 | 


如 果 想 要 制作 流星 雨 的 效果 ， 只 绘制 一 颗 流星 是 不 够 的 ， 但 是 如 果 按 照 绘制 一 颗 流星 


的 方法 绘制 整个 天 空 的 流星 


EE 


14.2.1 制作 流星 雨 


接着 再 加 一 个 流星 雨 ， 使 用 MeteorShower 类 ， 人 入 


有 。 
示例 代码 如 下 : 


// 坐标 
class Crood { 

constructor(x=0, y=0) { 

this.; 


thisy =Yy; 
} 
setCrood(x, y) { 
this.x =x; 
this.y = y; 
} 
copy(){ 
return new Crood(this.x, this.y); 


// 流星 
class ShootingStar{ 
constructor(init=new Crood, final=new 

Crood, size=3, speed=200, onDistory=null) { 

this.init = init; // 初始 位 置 

this.final = final; // 最 终 位 置 

this.size = size; // 大 小 

this.speed = speed; // 速度 : 像素 /s 


// 飞行 总 时 间 
this.dur = Math.sqrt(Math.pow(this. 
final.x-this.init.x, 2) + Math.pow(this.final. 
y-this.init.y, 2)) * 1000 / this.speed; 


this.pass = 0; // 已 过 去 的 时 间 

this.prev = this.init.copy(); // 上 一 帆 位 
置 

this.now = this.init.copy(); // 当前 位 置 


下 ， 代 码 会 很 烦琐 ， 接 下 来 讲解 如 何 绘制 一 场 流星 雨 。 


成 多 一 些 随机 位 置 的 流星 ， 做 出 流 


this.onDistory = onDistory; 
} 
draw(ctx, delta) { 

this.pass += delta; 


this.pass = Math.min(this.pass, this. 


dur); 


let percent = this.pass / this.dur; 


this.now.setCrood( 
this.init.x + (this.final.x - this.init.x) * 


percent, 


this.init.y + (this.final.y - this.init.y) * 


percent 


); 


// canvas 

ctx.strokeStyle = '#fff"; 

ctx.lineCap = 'round'; 
ctx.lineWidth = this.size; 
ctx.beginPath(); 
ctx.moveTo(this.now.x, this.now.y); 
ctx.lineTo(this.prev.x, this.prevy); 
ctx.stroke(); 


this.prev.setCrood(this.now.x, this.now. 


y); 


if (this.pass 
this.distory(); 


his.dur) { 


distory() { 
this.onDistory && this.onDistory(); 


综合 实践 应 用 


class MeteorShower { 

constructor(cvs, ctx) { 
this.cvs = cvs; 
this.ctx = ctx; 
this.stars = []; 
thisT; 
this.stop = false; 
this.playing = false; 


createStar() { 
let angle = Math.PI/ 3; 
let distance = Math.random()* 400; 
let init = new Crood(Math.random() * 
this.cvs.width|0, Math.random()* 100|0); 
let final = new Crood(init.x + distance 
* Math.cos(angle), init.y + distance * Math. 
sin(angle)); 
let size = Math.random()* 2; 
let speed = Math.random() * 400 + 100; 
let star = new ShootingStar( 
init, final, size, speed, 
()=>{this.removel(star)} 
)»; 


return star; 


removelstar) { 
this.stars = this.stars.filter((s)=>{ return 
s I== star}); 
} 


Update(delta) { 
if (!this.stop && this.stars.length < 20) { 
this.stars.push(this.createStar()); 
} 
this.stars.forEach((star)=>{ 
stardraw(this.ctx, delta); 
六 


tick(){ 
if (this.playing) return; 


this.playing = true; 


let now = (new Date()).getTime(); 
let last = now; 
let delta; 


let _tick = ()=>{ 
if (this.stop && this.stars.length === 
of 
cancelAnimationFramelthisT); 
this.playing = false; 
return; 


delta = now - last; 

delta = delta > 500 ? 30 : (delta < 16? 
16 : delta); 

last =now; 

// console.log(delta); 


this.T = requestAnimationFrame(_ 
tick); 


ctx.savel(); 
ctxfillstyle = 'rgba(0,0,0,0.2)'; // 每 
一 帧 用 " 半 透明 " 的 背景 色 清除 画布 
ctx.fillRect(0, 0, cvs.width, cvs. 
height); 
ctx.restore(); 
this.update(delta); 
和 
tick(); 
} 


start() { 
this.stop = false; 
this.tick(); 


stop() { 
this.stop = true; 


// effet 
let cvs = document.querySelector('canvas'); 
let ctx = cvs.getContext('2d"); 
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let meteorShower = new 
MeteorShower(cvs, ctx); 


meteorShower.start(); 


代码 的 运行 效果 如 图 14-3 所 示 。 


从 图 14-3 可 以 看 出 做 出 的 流星 雨 
其 实 这 个 流星 雨 还 加 了 鼠标 移动 的 效果 。 


14.2.2 鼠标 移动 的 效果 


在 这 场 流星 雨中 可 以 看 到 ， 流 星 雨 就 是 随 着 鼠标 的 移动 而 移动 ， 还 可 以 左 击 鼠 标 使 流 
星 的 样式 发 生 改 变 
示例 代码 如 下 : 
function mouse_wheel(evt) else if(evt.detail) 
{ { 
evt=evt| |event; delta=-evt.detail/3; 
var delta=0; } 
if(evt.wheelDelta) star_speed+=(delta>=0)?-0.2:0.2; 
{ if(evt.preventDefault) evt. 
delta=evt.wheelDelta/120; preventDefault(); 
} } 


可 以 看 一 下 按 下 鼠标 左 键 不 放 的 效果 〈 见 左下 图 ) 
随 着 鼠标 移动 的 效果 《〈 见 右 下 图 ) 


再 次 点 击 流星 和 
鼠标 放 在 中 间 的 


RR ( 见 左 l 
， 可 以 看 出 流星 雨 的 移动 变 慢 了 ( 见 右 下 


哆 | 


雨 的 移动 速度 明显 变 快 


以 上 都 是 雨 制作 过 程 ， 下 面 是 完整 的 代码 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="zh-CN"> 


<head> 


<title> 雨 </title> 


流星 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
<meta http-equiv="content-language" content="zh-CN"> 
<style type="text/css"> 
body {margin:0;padding:0;background-color:#000000;font-size:0;overflow:hidden} 
div {margin:0;padding:0;position:absolute;font-size:0;overflow:hidden} 
canvas{background-color:#000000;overflow:hidden} 
</style> 
</head> 
<script type="text/javascript"> 
function 5ilid) { return document.getElementByld(id); } 
function S$r(parent,child) { (document.getElementByld(parent)).removeChild(document. 
getElementByld(child)); } 
function $t(name) { return document.getElementsByTagName(name); } 


function $c(code) { return String.fromCharCode(code); } 


function 5h(value) { return ('0'+Math. 
max(0,Math.min(255,Math.round(value))). 
toString(16)).slice(-2); } 
function _i(lid,value) { $t('div')[id]. 
innerHTML+=value; } 
function _h(value) { return 
lhires?value:Math.round(value/2); } 
function get_screen_size() 
{ 
var w=document.documentElement. 
clientWidth; 
var h=document.documentElement. 
clientHeight; 
return Array(w,h); 
} 
var url=document.location.href; 
var flag=true; 
var test=true; 
var n=parselnt((url.indexOf('n=")!=- 
1)?url.substring(url.indexOf('n=")+2,((url. 
substring(url.indexOf('n=")+2,url.length)). 
indexOf('&')!=-1)?url.indexOf('n=")+2+(url. 
substring(url.indexOf('n=")+2,url.length)). 
indexOf('&'):url.length):512); 
Var W=0; 
var h=0; 


Var x=0; 


var 
varz=0; 
var star_color_ratio=0; 

Var star_Xx_save,star_y_save; 
var star_ratio=256; 

var star_speed=4; 

var star_speed_save=0; 

var star=new Array(n); 

var color; 

var opacity=0.1; 

Var cursor_x=0; 

Var cursor_y=0; 

var mouse_x=0; 

var mouse_y=0; 

Var canvas_x=0; 

var canvas_y=0; 

Var canvas_w=0; 

var canvas_h=0; 


var context; 


var key; 
var ctrl; 
var timeout; 
var fps=0; 
function init() 
{ 
var a=0; 
for(var i=0;i<nji++) 
{ 
star[]=new Array(5); 
star[i][0]=Math.random()*w*2-x*2; 
star[i][1]=Math.random()*h*2-y*2; 
star[i][2]=Math.round(Math. 


random()*z); 


star[i][3]=0; 
star[i][4]=0; 
} 
var starfield=Si('starfield'); 
starfield. style.position='absolute'; 
starfield.width=w; 
starfield.height=h; 
context=starfield.getContext('2d'); 
context.fillStyle='rgb(0,0,0)'; 
context.strokeStyle='rgb(255,255,255)'; 
var adsense=Si('adsense'); 
adsense.style.left=Math.round((w- 


728)/2)+'px'; 


adsense.style.top=(h-15)+'px'; 
adsense.style.width=728+'px' 
adsense.style.height=15+'px'; 
adsense.style.display="block'; 
} 
function anim() 
{ 
mouse_x=cursor_x-X; 
mouse_y=cursor_y-y; 
context.fillRect(0,0,w,h); 
for(var i=0;i<n;i++) 
{ 
test=true; 


star_x_save=star[i][3]; 


star_y_save=star[i][4]; 


star[i][0]+=mouse_x>>4; if(star[i] 


[0]>x<<1) { star[i][0]-=w<<1; test=false; 
} if(star[i][0]<-x<<1) { star[i][0]+=w<<1; 
test=false; } 
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综合 实践 应 用 


star[i][1]+=mouse_y>>4; if(star[i] 
[1]>y<<1) { star[i][1]-=h<<1; test=false; 
} if(star[i][1]<-y<<1) { star[i][1]+=h<<1; 
test=false; } 
star[i][2]-=star_speed; if(star[i][2]>z) 
{ star[i][2]-=z; test=false; } if(star[i][2]<0) { 
star[i][2]+=z; test=false; } 
star[i][3]=x+(star[i][0]/star[i] 
[2])*star_ratio; 
star[i][4]=y+(star[i][1]/star[i] 
[2])*star_ratio; 
if(star_x_save>0&&star_x_save<w&&star_ 
Y_save>0&&star_yY_save<h&&test) 
{ 
context.lineWidth=(1-star_color_ 
ratio*star[i][2])*2; 
context.beginPath(); 
context.moveTo(star_x_save,star_ 
y_save); 
context.lineTo(star[i][3],star[i][4]); 
context.stroke(); 
context.closePath(); 


} 
timeout=setTimeout('anim()',fps); 
} 
function move(evt) 
{ 
evt=evt| |event; 
Cursor_x=evt.pageX-canvas_x; 
cursor_y=evt.pageY-canvas_y; 
} 
function key_manager(evt) 
{ 
evt=evt| |event; 
key=evt.which | |evt.keyCode; 
Switch(key) 
{ 
Case 27: 
flag=flag?false:true; 
if(flag) 
timeout=setTimeout('anim()',f 


ps); 


clearTimeout(timeout); 
} 
break; 
Case 32: 
star_speed_save=(star_ 
speed!=0)?star_speed:star_speed_save; 
star_speed=(star_ 
speed!=0)?0:star_speed_save; 
break; 
case 13: 
context.fillstyle='rgba(0,0,0,'+opaci 
ty+)'; 
break; 
} 
top.status="key="+((key<100)?'0":")+((ke 
y<10)?'0":")+key; 
function release() 
{ 
switch(key) 
{ 
case 13: 
context.fillstyle='rgb(0,0.0) 


break; 


} 
function mouse_wheel(evt) 
{ 
evt=evt | |event; 
var delta=0; 
if(evt.wheelDelta) 
{ 
delta=evt.wheelDelta/120; 
else if(evt.detail) 
{ 
delta=-evt.detail/3; 
上 
star_speed+=(delta>=0)?-0.2:0.2; 
if(evt.preventDefault) evt. 
preventDefault(); 
日 
function start() 


resizel(); 


anim(); 

} 

function resize() 

{ 
w=parselnt((url.indexOf('w=")!=-1)?url.substring(url.indexOf("w=")+2,((url.substring(url. 
indexOf('w=")+2,url.length)).indexOf('&"')!=-1)?url.indexOf('w=")+2+(url.substring(url. 
indexOf('w=")+2,url.length)).indexOf('&'):url.length):get_screen_size()[0]); 
h=parselnt((url.indexOf('h=")!=-1)?url.substring(url.indexOf('h=")+2,((url.substring(url. 
indexOf('h=")+2,url.length)).indexOf('&')!=-1)?url.indexOf('h=")+2+(url.substring(url. 
indexOf('h=")+2,url.length)).indexOf('&'):url.length):get_screen_size()[1]); 

x=Math.round(w/2); 
y=Math.round(h/2); 
z=(w+h)/2; 
star_color_ratio=1/z; 
Cursor_X=X; 
cursor_y=y; 

init(); 

} 

document.onmousemove=move; 

document.onkeypress=key_manager; 

document.onkeyup=release; 

document.onmousewheel=mouse_wheel; if(window.addEventListener) window.addEventListener 
('DOMMouseScroll',mouse_wheel,false); 


</script> 


<body onload="start()" onresize: size()" onorientationchange="resize()" onmousedown="context. 
filistyle='rgba(0,0,0,'+opacity+')"" onmouseup="context.fillStyle='rgb(0,0,0)"> 

<canvas id="starfield" style="background-color:#000000"></canvas> 

<div id="adsense" style="position:absolute;background-color:transparent;display:none”"> 

</div> 

</body> 

</html> 


-= “三 | 
| 本 章 结束 语 | 


以 


本 章 运用 HTML5 中 的 canvas 属性 画 了 一 场 浪漫 的 流星 雨 。canvas 属 


经 常 练习 画 一 些 简单 的 效果 ， 熟 能 生 巧 ， 慢 慢 就 能 运用 自如 了 。 


250/251 


参考 文献 


cc 


1. 沈 真 波 ， 薛 志 红 ， 王 丽 芳 .After Efects CS6 影视 后 期 制作 标准 教程 [M1]. 北京 : 人 民 邮 电 H 
版 社 ，2016. 
2. 潘 强 ， 何 佳 .Premiere Pro CC 影视 编辑 标准 教程 [M]. 北京 : 人 民 邮 电 出 版 社 ，2016. 

3. 汤 京 花 ， 宋 园 .Dreamweaver CS6 网 页 设计 与 制作 标准 教程 [MI]. 北京 : 人 民 邮 电 出 版 社 ， 


2016. 
4. 马 丹 .Dreamweaver CC 网 页 设计 与 制作 标准 教程 IM]. 北京 : 人 民 邮 电 


版 社 ，2016. 


= 


